先说一下单个倒计时的实现，以下是效果图
image.png
wxml如下：
<view class="time" ><text>{{h}}</text>:<text>{{m}}</text>:<text>{{s}}</text></view>
js文件：
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
Page({
onLoad: function (options) {
var that = this;
that.countTime();
wx.request({
url: '',
data: {},
method: 'GET',
dataType: 'json',
header: {
'content-type': 'application/json'
},
success: function (res) {
var p_end_date=res.data.data.PRESKUINFO.P_END_DATE;//活动结束时间，php接口时间戳
that.setData({
P_END_DATE: p_end_date
})
}
})
},
countTime() {
var end_time = this.data.P_END_DATE;
var nowTime = new Date();
var now = nowTime.getTime();
//时间差
var leftTime = end_time - now / 1000;
//定义变量 h,m,s保存倒计时的时间
var h=0, m=0, s=0;
if (leftTime >=0) {
// d = Math.floor(leftTime/1000/60/60/24);
h = Math.floor(leftTime / 60 / 60);
m = Math.floor(leftTime / 60 % 60);
s = Math.floor(leftTime % 60);
}
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
this.setData({
h: h ,
m: m,
s: s,
});
setTimeout(this.countTime, 1000);
},
})
拼团倒计时列表效果图如下：
image.png
wxml
<swiper-item wx:for="{{groupData}}" >
<view class="hd" wx:if="{{item.is_status==1}}">
<view class="hd-left">
<image src="{{item.head_url}}" style="width:64rpx;height:64rpx;"></image>
<view class="hd-user">
<view class="hd-user-name" >{{item.user_name}}:</view>
<view class="hd-user-dec">帮一下忙吧，点我</view>
</view>
</view><!--hd-left-->
<view class="hd-right" >
<view class="hd-ct">
<view class="hd-ct-people">还差1人成团</view>
<view class="hd-ct-time" >仅剩：{{item.date}}</view>
</view>
<view class="yjct-btn">一键成团</view>
</view><!--hd-right-->
</view><!--hd-->
</swiper-item>
js文件：
function checkTime(i) {//时间不够两位数前补0
if (i < 10) {
i = "0" + i;
}
return i;
}
Page({
onLoad: function (options) {
var that = this;
that.getTime();
wx.request({
url: '',
data: {},
method: 'GET',
dataType: 'json',
header: {
'content-type': 'application/json'
},
success: function (res) {
var groupInfoDetail=res.data.data.groupInfo.detail;//拼团用户列表信息
that.setData({
groupInfoDetail: groupInfoDetail
})
}
})
},
getTime: function () {
var groupInfoDetail = this.data.groupInfoDetail;
var pinList=[];
var arr=[];
for (var info in groupInfoDetail) {
var infos = groupInfoDetail[info];
var is_status = infos['STATUS'];
if (is_status==1){
var end_date_time = infos['END_DATE'];//拼团结束时间
var user_name = infos['USER_NAME'];
var head_url =infos['F_HEAD_URL'];
var nowTime = new Date();
var now = nowTime.getTime();
//时间差
var leftTime = end_date_time - now / 1000;
//定义变量 d,h,m,s保存倒计时的时间
var h = 0, m = 0, s = 0;
if (leftTime >= 0) {
h = Math.floor(leftTime / 60 / 60);
m = Math.floor(leftTime / 60 % 60);
s = Math.floor(leftTime % 60);
}
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
var timer = h + ':' + m + ':' + s;
pinList={
'date': timer,
'user_name': user_name,
'head_url': head_url,
'is_status': is_status
}
}
arr.push(pinList)
}
this.setData({
groupData: arr
});
setTimeout(this.getTime, 1000);
},
})
