微信小程序（十八）picker組件詳細介紹

更新時間：2016年09月27日 15:29:02 作者：順子_RTFSC

這篇文章主要介紹了微信小程序 picker組件詳細介紹的相關(guān)資料,需要的朋友可以參考下

picker選擇器分為三種，普通選擇器，時間選擇器，日期選擇器用mode屬性區(qū)分，默認(rèn)是普通選擇器。測試時時間和日期點擊無反應(yīng)不知道是BUG還是啥！沒法手機測試現(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)閉
 }
})

相關(guān)文章：

hello WeApp                     icon組件
Window                             text組件                                 switch組件
 tabBar底部導(dǎo)航               progress組件                         action-sheet
應(yīng)用生命周期                     button組件                            modal組件
頁面生命周期                     checkbox組件                       toast組件
模塊化詳                            form組件詳                            loading 組件
數(shù)據(jù)綁定                            input 組件                             navigator 組件
 View組件                         picker組件                             audio 組件
 scroll-view組件                  radio組件                               video組件
 swiper組件                       slider組件                             Image組件