修复更新-----2019-11-221.

订单列表中倒计时-wxml

viewwx:for"{{wearList.datetime}}"wx:for-item"item"wx:key"id"viewclass'dates'{{item.difftime}}/view/view2.

在封装倒计时之前，需要设置一个存放倒计时的容器

data:{timeArr1:[],//存放倒计时},3.

倒计时封装，getFormat2方法是封装解析时间戳的方法，在此就不做展示了

setCountDown(){lettime100;letthatthis;that.data.timeArr1setInterval(function(){for(leti0;ithat.data.listdata.length;i++){letnowtimes30*60*1000-(newDate().getTime()-that.data.listdata[i].createDate);if(nowtimes0){console.log('时间到了')that.getlistdata(that.data.pageNum)//that.data.listdata[i].createDate0;}letformatTimesgetFormat2(nowtimes);//that.data.listdata[i].createDate-time;that.data.listdata[i].countDown`${formatTimes.hh}:${formatTimes.mm}:${formatTimes.ss}`;}that.setData({listdata:that.data.listdata});},time)},4.

在请求订单列表之前，需要先清除计时器，最好放在onShow里边，同样销毁页面隐藏页面的方法里最好也清除计算器，否则进入订单详情再返回的时候，倒计时就会出现紊乱的情况

clearInterval(that.data.timeArr1)5.

请求订单列表时，导入上边封装好的倒计时方法that.setCountDown()

原文-----2017-12-2211:07:416.

最近在写一个列表功能，列表中有倒计时的效果，网上没有可用的素材，以下是本人自己写的，如有问题，希望大家指出。

7.

先来看看基本的效果

8.

小程序中列表倒计时，类似活动倒计时列表，列表中有多个倒计时效果，且不冲突

9.

先把时间打印出来，放在data中，然后在写计时器；如果先写计时器，然后把打印出来的时间放在data就会报错，setData不支持这种操作。

10.

数据文件（dates.js，返回的时间数据是剩余时间）

vardates[{dat:324235235},{dat:7200000},{dat:675875754}]module.exports{datetime:dates}11.

wxml文件（a.wxml）

viewwx:for"{{wearList.datetime}}"wx:for-item"item"wx:key"id"viewclass'dates'{{item.difftime}}/view/view12.

js文件（a.js）

vardatesrequire('../utils/dates.js');//数据文件Page({data:{},onShow(a){//console.log(dates.datetime)//数据letthatthis;letlendates.datetime.length;//时间数据长度functionnowTime(){//时间函数//console.log(a)for(vari0;ilen;i++){varintDiffdates.datetime[i].dat;//获取数据中的时间戳//console.log(intDiff)varday0,hour0,minute0,second0;if(intDiff0){//转换时间dayMath.floor(intDiff/(60*60*24));hourMath.floor(intDiff/(60*60))-(day*24);minuteMath.floor(intDiff/60)-(day*24*60)-(hour*60);secondMath.floor(intDiff)-(day*24*60*60)-(hour*60*60)-(minute*60);if(hour9)hour'0'+hour;if(minute9)minute'0'+minute;if(second9)second'0'+second;dates.datetime[i].dat--;varstrhour+':'+minute+':'+second//console.log(str)}else{varstr"已结束！";clearInterval(timer);}//console.log(str);dates.datetime[i].difftimestr;//在数据中添加difftime参数名，把时间放进去}that.setData({wearList:dates})//console.log(that)}nowTime();vartimersetInterval(nowTime,1000);}})13.

小程序中列表倒计时，类似活动倒计时列表，列表中有多个倒计时效果，且不冲突

14.

先把时间打印出来，放在data中，然后在写计时器；如果先写计时器，然后把打印出来的时间放在data就会报错，setData不支持这种操作。