picker選擇器分為三種,普通選擇器,時間選擇器, 日期選擇器 用mode屬性區(qū)分,默認(rèn)是普通選擇器。測試時時間和日期點擊無反應(yīng)不知道是BUG還是啥!沒法手機(jī)測試現(xiàn)在也不知道咋回事??!
主要屬性:
普通選擇器
時間選擇器
日期選擇器
wxml
<view>普通選擇器</view>
<!--mode默認(rèn)selector range數(shù)據(jù)源value選擇的index bindchange事件監(jiān)聽-->
<picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected">
<text>{{array[index]}}</text>
</picker>
<view>時間選擇器</view>
<picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTimePickerSelected">
<text>{{time}}</text>
</picker>
<view>日期選擇器</view>
<picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="listenerDatePickerSelected">
<text>{{date}}</text>
</picker>
js
Page({
data:{
// text:"這是一個頁面"
array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],
index: 0,
time: '08:30',
date: '2016-09-26'
},
/**
* 監(jiān)聽普通picker選擇器
*/
listenerPickerSelected: function(e) {
//改變index值,通過setData()方法重繪界面
this.setData({
index: e.detail.value
});
},
/**
* 監(jiān)聽時間picker選擇器
*/
listenerTimePickerSelected: function(e) {
//調(diào)用setData()重新繪制
this.setData({
time: e.detail.value,
});
},
/**
* 監(jiān)聽日期picker選擇器
*/
listenerDatePickerSelected:function(e) {
this.setDate({
date: e.detail.value
})
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關(guān)閉
}
})