uniapp vue 前端页面半小时选择器

本文介绍: 【代码】uniapp vue 前端页面半小时选择器。

<template>
  <view>
    <view class="uni-title uni-common-pl">时间选择器</view>
    <view class="uni-list">
      <view class="uni-list-cell">
        <view class="uni-list-cell-left">
          当前选择
        </view>
        <view class="uni-list-cell-db">
          <picker mode="selector" :value="timeIndex" range="{{timeRange}}" @change="bindTimeChange">
            <view class="uni-input">{{time}}</view>
          </picker>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      time: '', // 当前选择的时间
      timeIndex: 0, // 当前选择的时间索引
      timeRange: [] // 时间选择器的可选项
    };
  },
  mounted() {
    this.generateTimeRange();
  },
  methods: {
    generateTimeRange() {
      const startTime = new Date("2000/01/01 08:00");
      const endTime = new Date("2000/01/01 22:00");

      const timeOptions = [];
      while (startTime <= endTime) {
        const hour = String(startTime.getHours()).padStart(2, '0');
        const minute = String(startTime.getMinutes()).padStart(2, '0');
        const timeOption = `${hour}:${minute}`;
        timeOptions.push(timeOption);

        startTime.setMinutes(startTime.getMinutes() + 30);
      }

      this.timeRange = timeOptions;
      this.time = timeOptions[0];
    },
    bindTimeChange(e) {
      const selectedTimeIndex = e.mp.detail.value;
      this.timeIndex = selectedTimeIndex;
      this.time = this.timeRange[selectedTimeIndex];
    }
  }
};
</script>