微信小程序之 picker组件 （1）

picker选择器分为三种
1. 普通选择器
2. 时间选择器
3. 日期选择器

用mode属性区分，
默认是普通选择器。

---

一、普通选择器

<!--mode默认selector range数据源 value选择的index bindchange事件监听-->
<picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected">
  <text>{{array[index]}}</text>
</picker>

Page({
  data: {
    array: ['JavaScript', 'jQuery', 'Vue2.0', 'WeChat', 'Web'],
    index: 0,
  },
  /**
   * 监听普通picker选择器
   */
  listenerPickerSelected: function (e) {
    //改变index值，通过setData()方法重绘界面
    this.setData({
      index: e.detail.value
    });
  },
})

二、时间选择器

<picker mode="time" value="{{time}}" start="06:00" end="24:00" bindchange="listenerTPickerSelected">
  <text>{{time}}</text>
</picker>

Page({
  data: { 
    time: '08:30',
  },
 /**
   * 监听时间picker选择器
   */
  listenerTPickerSelected: function (e) {
    //调用setData()重新绘制
    this.setData({
      time: e.detail.value,
    });
  },
})

三、日期选择器

<picker mode="date" value="{{date}}" start="2016-09-26" end="2017-10-10" bindchange="datePickerFun">
  <text>{{date}}</text>
</picker>

Page({
  data: {
    date: '2016-09-26'
  },
   /**
   * 监听日期picker选择器
   */
  datePickerFun: function (e) {
    this.setDate({
      date: e.detail.value
    })
  },