微信小程序picker选择器怎么实现

本篇内容主要讲解“微信小程序picker选择器怎么实现”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“微信小程序picker选择器怎么实现”吧!

picker选择器分为三种，普通选择器，时间选择器， 日期选择器 用mode属性区分，默认是普通选择器。

小程序picker选择器的实现方式

wxml

普通选择器   {{array[index]}}  时间选择器  {{time}}    日期选择器  {{date}} 

js

Page({
 
data:{
 
// text:"这是一个页面"
 
array: [&＃39;Android&＃39;, &＃39;IOS&＃39;, &＃39;ReactNativ&＃39;, &＃39;WeChat&＃39;, &＃39;Web&＃39;],
 
index: 0,
 
time: &＃39;08:30&＃39;,
 
date: &＃39;2016-09-26&＃39;
 
},
 
 
 
/**
 
* 监听普通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选择器怎么实现”有了更深的了解，不妨来实际操作一番吧！这里是编程笔记网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！