小程序下拉框选择范例

 

下拉框选择范例

<!-- 时间选择器 -->
<picker class="weui-btn" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <button type="default">时间选择器</button>
</picker>
<!-- 日期选择器 -->
<picker class="weui-btn" mode="date" value="{{date}}" start="" end="" bindchange="bindTimeChange">
    <button type="default">搜索</button>
</picker>
<!-- 单列选择器 -->
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
      <button class="weui-btn" type="default">自定义</button>
</picker>

　　

 data: {

     

      time: '12:01',

      date: '2016-09-01',

      array: ['红色', '橙色', '黄色', '绿色', '青色', '蓝色', '紫色'],

      index: 0,

  },

//时间选择器
  bindTimeChange: function(e) {
    this.setData({
        time: e.detail.value
    })
  },
  // 日期选择器
  bindDateChange: function(e) {
    this.setData({
        date: e.detail.value
    })
  },
  // 单列选择器
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value);//index为数组点击确定后选择的item索引
    this.setData({
      index: e.detail.value

    })
  },