微信小程序时间段选择器-picker组件动态选择时间

代码仓库：https://gitee.com/DerekAndroid/miniProgramAgen/tree/master/pages/hoursPicker

效果：

wxml：

<view class="pickerMai">多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange"
  value="{{multiIndex}}" range="{{multiArray}}">
  <view class="picker">
    当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}
  </view>
</picker>

js:

Page({
  data: {
    multiArray: [['今天', '明天', '后天'], []],
    multiIndex: [0, 0],
    normalHours: [],
    todayHours: [],
  },

  onShow() {
    this.initHour();
  },

  initHour() {
    var hour = new Date().getHours();
    var todayHours = this.testConcat(hour); //根据当前小时生成数组
    var normalHours = this.testConcat(); //生成默认小时数组
    var multiArray = this.data.multiArray;
    multiArray[1] = todayHours; //初始化今天的小时数组
    this.setData({
      todayHours: todayHours,
      normalHours: normalHours,
      multiArray: multiArray,
    })
  },

  bindMultiPickerChange: function (e) {
    console.log('picker发送选择改变，携带值为multiIndex=', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange: function (e) {
    var column = e.detail.column;
    var value = e.detail.value;
    console.log('修改的列为', column, '，值为', value);
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[column] = value;
    switch (column) {
      case 0: //第一列的变化
        switch (value) {
          case 0:
            data.multiArray[1] = this.data.todayHours; //切换到今天时间数组
            break;
          case 1:
            data.multiArray[1] = this.data.normalHours;
            break;
          case 2:
            data.multiArray[1] = this.data.normalHours;
            break;
        }
        break;
      case 1:
        console.log('multiIndex', data.multiIndex);
        break;
    }
    this.setData(data);
  },

  //生成06:00-8:00小时数组
  testConcat(start = 6) {
    var arrayHours = [];
    for (let i = start; i < 21; i++) {
      if (i < 10) {
        var hourStr = `0${i}:00-${i + 2}:00`;
      } else {
        var hourStr = `${i}:00-${i + 2}:00`;
      }
      arrayHours.push(hourStr);
    }
    // console.warn('arrayHours', arrayHours);
    return arrayHours;
  },
})