无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

Menu
小程序資訊
小程序資訊
秀杰實(shí)戰(zhàn)教程系列《五》:實(shí)戰(zhàn)課程之記賬應(yīng)用開發(fā)(續(xù))
時(shí)間:2016-10-21 10:26:00

緣起:昨天官方開發(fā)有了更新v0.10.101100,Picker的mode屬性已經(jīng)支持date以及time(background-image的bug也修復(fù)),于是來更新此實(shí)例。

目標(biāo):實(shí)現(xiàn)集成日期組件

如圖

官方文檔出處:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html

步驟,在item.wxml文件中增加一個(gè)picker組件,如下:

如圖

從圖中可以看出:

1.日期后面是空白的,應(yīng)該默認(rèn)顯示今天日期; 2.點(diǎn)擊確定也沒有顯示到組件上,需要實(shí)現(xiàn)bindDateChange方法。

于是我們需要在item.js文件中,聲明一個(gè)data值date與wxml中的{{date}}綁定關(guān)聯(lián)

然后在onLoad中初始化字符串格式的日期值,詳細(xì)說明見注釋:

經(jīng)過如上處理,日期組件已經(jīng)顯示為當(dāng)前日期

如圖

處理到此,我們還需要修復(fù)一個(gè)邏輯錯(cuò)誤,即組件的結(jié)束日期應(yīng)該不超過當(dāng)日,做法也很簡單,只需要在wxml文件中對picker的日期屬性end由2017-09-01改為{{date}}即可

<picker mode="date" value="{{date}}" start="{{date}}" end="2017-09-01" bindchange="bindDateChange">

吐槽一下,官方的picker的還是有bug的,完全不聽start與end使喚,仍可以選任意日期,暫時(shí)不去理會,代碼就這么寫著,什么時(shí)候開發(fā)工具修復(fù)了自然可以了,畢竟是現(xiàn)在還只是內(nèi)測,就將就用著。

接下來處理日期組件點(diǎn)擊確認(rèn)事件bindDateChange

回到item.js文件

聲明一個(gè)bindDateChange方法,添加如下代碼以寫回data中的date值

至此,已經(jīng)實(shí)現(xiàn)集成日期picker組件。剩下的就是將它同之前的標(biāo)題、類型、金額字段那樣存在json再本地setStorage存儲即可,這里不作贅述

咨詢
微信掃碼咨詢
電話咨詢
400-888-9358