小程序下拉框選擇范例

 

下拉框選擇范例

<!-- 時間選擇器 -->
<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

    })
  },