微信小程序picker选择器怎么实现
导读:本文共2144字符,通常情况下阅读需要7分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器。 小程序picker选择器的实现方式 wxml<view>普通选择器</view><!--mode默认selectorrange数据源value选择的ind... ...
目录
(为您整理了一些要点),点击可以直达。picker选择器分为三种,普通选择器,时间选择器, 日期选择器 用mode属性区分,默认是普通选择器。
小程序picker选择器的实现方式
wxml
<view>普通选择器</view><!--mode默认selectorrange数据源value选择的indexbindchange事件监听--><pickermode="selector"range="{{array}}"value="{{index}}"bindchange="listenerPickerSelected"><text>{{array[index]}}</text></picker><view>时间选择器</view><pickermode="time"value="{{time}}"start="06:00"end="24:00"bindchange="listenerTimePickerSelected"><text>{{time}}</text></picker><view>日期选择器</view><pickermode="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(){
// 页面关闭
}
})
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
微信小程序picker选择器怎么实现的详细内容,希望对您有所帮助,信息来源于网络。