
picker選擇器分為三種,普通選擇器,時間選擇器, 日期選擇器 用mode屬性區分,默認是普通選擇器。測試時時間和日期點擊無反應不知道是BUG還是啥!沒法手機測試現在也不知道咋回事!!
主要屬性:
普通選擇器

時間選擇器

日期選擇器

wxml
<view>普通選擇器</view><!--mode默認selector range數據源value選擇的index bindchange事件監聽--><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' }, /** * 監聽普通picker選擇器 */ listenerPickerSelected: function(e) { //改變index值,通過setData()方法重繪界面 this.setData({ index: e.detail.value }); }, /** * 監聽時間picker選擇器 */ listenerTimePickerSelected: function(e) { //調用setData()重新繪制 this.setData({ time: e.detail.value, }); }, /** * 監聽日期picker選擇器 */ listenerDatePickerSelected:function(e) { this.setDate({ date: e.detail.value }) }, onLoad:function(options){ // 頁面初始化 options為頁面跳轉所帶來的參數 }, onReady:function(){ // 頁面渲染完成 }, onShow:function(){ // 頁面顯示 }, onHide:function(){ // 頁面隱藏 }, onUnload:function(){ // 頁面關閉 }})相關文章:
hello WeApp icon組件
Window text組件 switch組件
tabBar底部導航 progress組件 action-sheet
應用生命周期 button組件 modal組件
頁面生命周期 checkbox組件 toast組件
模塊化詳 form組件詳 loading 組件
數據綁定 input 組件 navigator 組件
View組件 picker組件 audio 組件
scroll-view組件 radio組件 video組件
swiper組件 slider組件 Image組件
新聞熱點
疑難解答