起始情况

时间选择需要从11:00到20:00，但是picker组件弹窗这步意外来了。 在真机微信小程序上测试的时候，

• 自己手机上是11时到20时，初始是11时，【没什么毛病】。
• 意外情况（初始是当前时间、初始是20:00），但是picker组件又没有设置选择框初始值的属性，于是这就成了一个问题。

多列选择器自定义时间选择组件

• 通过多列选择器自定义时间选项。
• 处理20点不能选择00以外的。

<template>
  <view class="container">
    <picker mode="multiSelector" :range="{{ timeRanges }}" @change="onTimeChange" @columnchange="onTimeColumnChange">
      <view v-if="selectedTime" class="picker">
        {{ selectedTime }}
      </view>
      <view class="font-size-27rpx" v-else style="color:#808080">请选择时间</view>
    </picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timeRanges: [generateRange(11, 20),generateRange(0, 59)],
        selectedTime: ''
      };
    },
    methods: {
      generateRange(start, end) {
        const range = [];
        for (let i = start; i <= end; i++) {
          range.push(this.formatNumber(i));
        }
        return range;
      },
      formatNumber(n) {
        n = n.toString();
        return n[1] ? n : '0' + n;
      },
      onTimeChange(e) {
        const { value } = e.detail;
        const hour = this.timeRanges[0][value[0]];
        const minute = this.timeRanges[1][value[1]];
        this.selectedTime = `${hour}:${minute}`;
      }，
      onTimeColumnChange(e) {
		if(e.detail.column === 0 && e.detail.value === 9) {
			this.timeRanges[1] = ['00']
		}else {
			this.timeRanges[1] = generateRange(0, 59)
		}
	}
    }
  };
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .picker {
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 5px;
  }
</style>