微信小程序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组件详细介绍相关文章请关注PHP中文网！