我们先来看一下效果图,我不知道怎么弄动态的,也没时间研究,将就着看吧
wxml
<view class="like-overall">
<view class="like-chunk back" wx:for="{{list}}" wx:key="index">
<view class="like-image-over" >
<image class="like-img" src="{{item.image}}"></image>
</view>
<view class="like-chunk-title size-twenty-five">{{item.title}}</view>
<view class="like-chunk-price size-twenty-five">
<view class="icon-price">¥ </view>
<view class="price">{{item.price}}</view>
</view>
<view>{{item.count_down.hou}}:{{item.count_down.min}}:{{item.count_down.sec}}</view>
</view>
</view>
js
Page ({
data: {
list: [
{
title: "华为手机5G",
image: "cloud://wsp-d2dy4.7773-wsp-d2dy4-1301066571/tds/d40b253c2d5dd31c.jpg!q70.jpg",
price: "4999.00",
characteristic: "",
end_time: "2020/11/28 00:10:01"
},
{
title: "华为手机5G",
image: "cloud://wsp-d2dy4.7773-wsp-d2dy4-1301066571/tds/d40b253c2d5dd31c.jpg!q70.jpg",
price: "4999.00",
end_time: "2020/11/28 01:20:02"
},
{
title: "华为手机5G",
image: "cloud://wsp-d2dy4.7773-wsp-d2dy4-1301066571/tds/d40b253c2d5dd31c.jpg!q70.jpg",
price: "4999.00",
end_time: "2020/11/28 02:30:03"
},
{
title: "华为手机5G",
image: "cloud://wsp-d2dy4.7773-wsp-d2dy4-1301066571/tds/d40b253c2d5dd31c.jpg!q70.jpg",
price: "4999.00",
end_time: "2020/11/28 03:40:04"
}
],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 执行倒计时函数
this.countDown();
},
timeFormat(param) {//小于10的格式化函数
return param < 10 ? '0' + param : param;
},
countDown: function() {
// 获取当前时间, 同样得到活动结束时间数组
let newTime = new Date().getTime(); // 当前时间
let endTimeList = this.data.list;
let countDownArr = [];
endTimeList.forEach(i => {
let endTime = new Date(i.end_time).getTime();
let obj = null;
// 如果活动未结束,对时间进行处理
if (endTime - newTime > 0) {
let time = (endTime - newTime) / 1000;
// 获取天、时、分、秒
let day = parseInt(time / (60 * 60 * 24));
let hou = parseInt(time % (60 * 60 * 24) / 3600);
let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
obj = {
day: this.timeFormat(day),
hou: this.timeFormat(hou),
min: this.timeFormat(min),
sec: this.timeFormat(sec)
}
} else {//活动已结束,全部设置为'00'
obj = {
day: '00',
hou: '00',
min: '00',
sec: '00'
}
}
i.count_down = obj
})
// 渲染,然后每隔一秒执行一次倒计时函数
this.setData({ list: endTimeList })
setTimeout(this.countDown, 1000);
// console.log(endTimeList)
},
})
以上就是实现代码,有什么问题可以下方留言