【最新代码请前往dcloud下载 商城限时秒杀选项卡、tab切换 】
1、index.vue
<template>
<view class="index"><tabs :defaultHour="defaultHour" :optionArr="optionArr"></tabs></view>
</template>
<script>
import tabs from '@/components/tel-tabs/tel-tabs.vue';
export default {
components: {
tabs
},
data() {
return {
defaultHour: '',
optionArr: [
{
id: 1,
hour: '00:00-02:00',
hours: '00:00'
},
{
id: 2,
hour: '02:00-04:00',
hours: '02:00'
},
{
id: 3,
hour: '04:00-06:00',
hours: '04:00'
},
{
id: 4,
hour: '06:00-08:00',
hours: '06:00'
},
{
id: 5,
hour: '08:00-10:00',
hours: '08:00'
},
{
id: 6,
hour: '10:00-12:00',
hours: '10:00'
},
{
id: 7,
hour: '12:00-14:00',
hours: '12:00'
},
{
id: 8,
hour: '14:00-16:00',
hours: '14:00'
},
{
id: 9,
hour: '16:00-18:00',
hours: '16:00'
},
{
id: 10,
hour: '18:00-20:00',
hours: '18:00'
},
{
id: 11,
hour: '20:00-22:00',
hours: '20:00'
},
{
id: 12,
hour: '22:00-24:00',
hours: '22:00'
}
]
};
},
onLoad() {
this.getComputedTime();
},
methods: {
getComputedTime() {
for (var i = 0; i < this.optionArr.length; i++) {
const startTimeStr = this.optionArr[i].hour.split('-')[0];
const endTimeStr = this.optionArr[i].hour.split('-')[1];
const now = new Date();
const [startHour, startMinute] = startTimeStr.split(':');
const [endHour, endMinute] = endTimeStr.split(':');
const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), startHour, startMinute);
const end = new Date(now.getFullYear(), now.getMonth(), now.getDate(), endHour, endMinute);
if (now.getTime() >= start.getTime() && now.getTime() < end.getTime()) {
this.defaultHour = this.optionArr[i].id;
}
}
}
}
};
</script>
<style lang="scss">
.index {
width: 750rpx;
}
</style>
2、tel-tabs.vue
<template>
<view class="options">
<scroll-view class="scroll-view_H" scroll-x="true">
<view class="options-box">
<block v-for="(item, i) in optionArr" :key="i">
<view class="options-item" :class="{ noStart: defaultHour < item.id, end: item.id < defaultHour, activeColor: defaultHour == item.id }">
<view class="options-item-hour">{
{
item.hour }}</view>
<view class="options-item-status">
<span v-if="item.id < defaultHour">已结束</span>
<span v-else-if="defaultHour == item.id">进行中</span>
<span v-else-if="defaultHour < item.id">即将开始</span>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
props: ['optionArr', 'defaultHour'],
data() {
return {
};
},
onLoad() {
},
methods: {
}
};
</script>
<style lang="scss">
.options {
width: 750rpx;
.options-box {
width: 100%;
padding-bottom: 50rpx;
box-sizing: border-box;
display: flex;
.options-item {
padding: 15rpx 10rpx;
box-sizing: border-box;
margin-right: 10rpx;
.options-item-hour {
width: 200rpx;
text-align: center;
font-size: 30rpx;
font-weight: 500;
}
.options-item-status {
width: 200rpx;
text-align: center;
font-size: 26rpx;
font-weight: 400;
margin-top: 6rpx;
}
}
.noStart {
background-color: dodgerblue;
}
.end {
background-color: darkgray;
}
.activeColor {
background-color: darkred !important;
color: #fff;
position: relative;
}
.activeColor:before {
content: '';
width: 0px;
height: 0px;
border-top: 20rpx solid darkred;
border-right: 20rpx solid transparent;
border-bottom: 20rpx solid transparent;
border-left: 20rpx solid transparent;
position: absolute;
bottom: -38rpx;
left: 50%;
margin-left: -20rpx;
z-index: 100;
}
}
}
</style>