微信小程序新手教程picker组件 _睿知

微信小程序新手教程picker组件，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧
picker组件
picker选择器分为三种，普通选择器，时间选择器，日期选择器用mode属性区分，默认是普通选择器。测试时时间和日期点击无反应不知道是BUG还是啥!没法手机测试现在也不知道咋回事!!
主要属性：
普通选择器

文章插图
时间选择器

文章插图
日期选择器

文章插图
wxml
普通选择器
{{array[index]}}
时间选择器
{{time}}
日期选择器
{{date}}
js
Page({
data:{
// text:"这是一个页面"
array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],
【微信小程序新手教程picker组件】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(){
// 页面关闭
}
})