微信小程序picker選擇器怎么實現

本篇內容主要講解“微信小程序picker選擇器怎么實現”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“微信小程序picker選擇器怎么實現”吧!

picker選擇器分為三種，普通選擇器，時間選擇器， 日期選擇器 用mode屬性區分，默認是普通選擇器。

小程序picker選擇器的實現方式

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(){
 
// 頁面關閉
 
}
 
})

到此，相信大家對“微信小程序picker選擇器怎么實現”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！