小程序下拉框选择范例

 

下拉框选择范例

<!-- 时间选择器 -->
<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

    })
  },