微信小程序 （十八）picker组件详细介绍

picker选择器分为三种，普通选择器，时间选择器， 日期选择器 用mode属性区分，默认是普通选择器。测试时时间和日期点击无反应不知道是BUG还是啥！没法手机测试现在也不知道咋回事！！

主要属性：

普通选择器

时间选择器

日期选择器

wxml

普通选择器


 {{array[index]}}


时间选择器

 {{time}}


日期选择器

 {{date}}

js

Page({
 data:{
 // text:"这是一个页面"
 array: ['Android', 'IOS', 'ReactNativ', 'WeChat', 'Web'],
 index: 0,
 time: '08:30',
 date: '2016-09-26'
 },

 
 listenerPickerSelected: function(e) {
  //改变index值，通过setData()方法重绘界面
  this.setData({
  index: e.detail.value
  });
 }, 

 
 listenerTimePickerSelected: function(e) {
  //调用setData()重新绘制
  this.setData({
   time: e.detail.value,
  });
 },

 
 listenerDatePickerSelected:function(e) {
 this.setDate({
  date: e.detail.value
 })
 },

 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})

相关文章：

hello WeApp                      icon组件
Window                             text组件                                switch组件
tabBar底部导航                 progress组件                        action-sheet
应用生命周期                    button组件                            modal组件
页面生命周期                    checkbox组件                       toast组件
模块化详                           form组件详                            loading 组件
数据绑定                           input 组件                             navigator 组件
View组件                          picker组件                             audio 组件
scroll-view组件                 radio组件                              video组件
swiper组件                        slider组件                              Image组件