picker?實(shí)現(xiàn)從底部彈出滾動(dòng)選擇器,有個(gè)屬性叫 mode维雇,只有三個(gè)值:
mode="selector"
mode="time"
mode="date"
所以要實(shí)現(xiàn)地區(qū)選擇淤刃、性別選擇……,就用 mode="selector"吱型,然后自己填充數(shù)據(jù)逸贾。
我們倒著介紹,先介紹 mode="date"
點(diǎn)我彈出選擇器
fields?可選擇值:year(細(xì)化到年)、month(細(xì)化到月)铝侵、day(細(xì)化到日)
效果:
注意:“微信web開發(fā)者工具”在這里有個(gè) BUG灼伤,上面我們指定的是 2017?年,但列表顯示的是 2018?年咪鲜。這個(gè) BUG?只存在于“微信web開發(fā)者工具”狐赡,在手機(jī)微信上不存在這個(gè) BUG。
綁定事件:
鑒于上面說的 BUG嗜诀,為了測(cè)試方便猾警,我們將 end?改到 2018?年孔祸。
{{date}}
Page({
data: {
date:?'2017-2'
},
bindDateChange: function(e) {
this.setData({
date: e.detail.value
})
}
})
data?值會(huì)自動(dòng)映射到控件隆敢,但是控件的值變化并不會(huì)映射到 data,所以要用一個(gè)方法(這里是 bindDateChange)來 setData崔慧。
mode="time"
時(shí)間選擇與日期選擇相似拂蝎,時(shí)間格式為:hh-mm,不具備 fields?屬性惶室。
mode="selector"
當(dāng)前選擇:{{array[index]}}
Page({
data: {
array: ['',?'女',?'男'],
index: 2
},
bindPickerChange:?function(e) {
this.setData({
index: e.detail.value
})
}
})