最近工作需求做一个时间条,如下图。是在uniapp小程序项目中做的,记录一下思路和成果,本人脑子不聪明,如果有更好的方法欢迎告诉我。
1.思路:刚开始接到这个需求想到的就是用时间段数组定位来实现。每一个时间段都是一个数组,多次遍历定位到背景的bar上。
2.template代码
<view class="time_bar">
<view class="flex align-center justify-between">
<view v-for="(items) in timeBarList" :key="items" class="time_bar_num">{{items}}
</view>
</view>
<view class="time_bar_bar">
<view class="time_bar_piece" v-for="(itemss,indexss) in item.showTimeArr" :key="indexss"
:style="{ width: itemss.duringTime, left: itemss.passTime }">
</view>
</view>
</view>
下划线的class是我自己定义的,其他的flex等class是使用了color-ui;
3.css代码
.time_bar {
margin-top: 26rpx;
overflow: auto;
.time_bar_num {
width: 21rpx;
height: 20rpx;
line-height: 20rpx;
font-size: 20rpx;
font-weight: 400;
color: #C7C7C7;
// text-align: center;
}
.time_bar_bar {
width: 653rpx;
height: 20rpx;
background: #D2E7FF;
border-radius: 6rpx;
margin-top: 9rpx;
position: relative;
overflow: hidden;
.time_bar_piece {
position: absolute;
top: 0;
background-color: #1A84FF;
height: 20rpx;
}
}
}
4.js代码
getList(){
const morningTime = new Date();
//开始时间需要在这改
morningTime.setHours(7, 0, 0, 0); // 设置小时、分钟、秒和毫秒为0
this.meetingList.forEach((v) => {
if (Array.isArray(v.timeArr) && v.timeArr.length > 0) {
if (!v.showTimeArr) {
v.showTimeArr = [];
}
// 计算每个数组中第一个时间与当前时间的差值(以小时为单位)
v.timeArr.forEach((timeArray) => {
const startTime = timeArray[0].replace(/\-/g, '/');
const endTime = timeArray[1].replace(/\-/g, '/');
const firstTime = new Date(startTime);
const secondTime = new Date(endTime);
let passTime = (firstTime - morningTime) / (1000 * 60 * 60); // 转换为小时
let duringTime = (secondTime - firstTime) / (1000 * 60 * 60); // 转换为小时
//改完时间这里需要改用100除以时间段多少个
passTime = (passTime * 667) / 100
duringTime = (duringTime * 667) / 100
v.showTimeArr.push({
"passTime": `${passTime}%`,
"duringTime": `${duringTime}%`
})
});
}
})
}
}
需要的数据格式是
[[],[],[],[],[],[],[],[],[]]
背面背景的条的刻度、开始时间、结束时间也可以后台配置。我这里都写死的。