小程序 时分-时分选择器

找了很久的时分-时分选择器   刚接触小程序  写的不多  还在学习中  在其他大神的博客上学习的  现记录一下

wxml：

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
    {{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}
</picker>
 

 

js：

  data: {
      index: 0,
    multiArray: [['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00'], [ '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']],//两个时间段
    multiIndex: [0, 0],//默认值
}，
  //时间段选择
  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    console.log(e.detail.value[0]);//获取第一个列改变的值
    console.log(e.detail.value[1]);//获取第二个列改变的值.
    if (e.detail.value[0] <= e.detail.value[1]){//如果第一列的值小于等于第二列的值
      this.setData({
        multiIndex: e.detail.value//输出时间段
      })
    }else{//否则提示
      wx.showToast({
        title: '请选择正确的时间段！',
        mask: true,
        icon: 'none',
      })
    }
  },

  bindMultiPickerColumnChange: function (e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    // 知道修改的列以后，就可以通过修改multiIndex中对应元素的值，然后再修改multiArray
  },