uni-app中为什么我的当前时间线和日程对不上底色时间段

在uni-app中，如果你发现当前时间线和日程对不上底色时间段，这通常是由于时间计算或样式应用不当导致的。以下是一个简化的代码案例，展示如何在uni-app中正确计算和设置时间段的底色。假设你有一个包含日程安排的数组，并且需要根据当前时间设置对应时间段的底色。

首先，确保你有一个包含日程安排的数组，每个日程都有一个开始时间和结束时间。例如：

data() {
    return {
        schedules: [
            { startTime: '09:00', endTime: '10:00' },
            { startTime: '14:00', endTime: '15:30' },
            // 更多日程...
        ],
        currentTime: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) // 当前时间
    };
}

接下来，在模板中，你可以使用v-for指令遍历日程数组，并根据当前时间设置底色。这里假设你有一个表示时间线的数组，例如每小时一个时间段：

<template>
    <view class="timeline">
        <view
            v-for="(hour, index) in ['00', '01', '02', ..., '23']" :key="index"
            :class="{'active-time': isActiveTime(hour + ':00')}"
        >
            {{ hour + ':00' }}
            <view class="schedule-container">
                <view
                    v-for="schedule in schedules" :key="schedule.startTime"
                    :class="{'schedule-active': isWithinTimeRange(schedule, hour + ':00')}"
                >
                    {{ schedule.startTime }} - {{ schedule.endTime }}
                </view>
            </view>
        </view>
    </view>
</template>

在脚本部分，定义isActiveTime和isWithinTimeRange方法：

methods: {
    isActiveTime(time) {
        const [currentHour, currentMinute] = this.currentTime.split(':').map(Number);
        const [targetHour, targetMinute] = time.split(':').map(Number);
        return currentHour === targetHour && currentMinute === 0; // 假设每小时的开始时间为活跃时间
    },
    isWithinTimeRange(schedule, targetTime) {
        const [startTime, endTime] = [schedule.startTime, schedule.endTime].map(time => new Date(`1970-01-01T${time}:00Z`).getTime());
        const target = new Date(`1970-01-01T${targetTime}:00Z`).getTime();
        return target >= startTime && target < endTime;
    }
}

最后，在样式部分定义.active-time和.schedule-active类：

.active-time {
    background-color: #ffeb3b; /* 当前时间底色 */
}
.schedule-active {
    background-color: rgba(0, 128, 0, 0.5); /* 日程底色 */
}

这个示例展示了如何根据当前时间和日程安排设置时间段的底色。你可能需要根据实际需求调整时间格式、比较逻辑和样式。