<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>