实现微信小程序列表页中显示多个批量倒计时共存的方法

如何实现微信小程序列表多个批量倒计时？

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

1、js页面代码如下：

var dates=require('../utils/dates.js');//数据文件  
  
Page({  
  data:{},  
  onShow(a){  
    // console.log(dates.datetime)//数据  
    let that=this;  
    let len=dates.datetime.length;//时间数据长度  
      
    function nowTime() {//时间函数  
      // console.log(a)  
      for (var i = 0; i < len; i++) {  
        var intDiff = dates.datetime[i].dat;//获取数据中的时间戳  
        // console.log(intDiff)  
        var day=0, hour=0, minute=0, second=0;         
        if(intDiff > 0){//转换时间  
          day = Math.floor(intDiff / (60 * 60 * 24));  
          hour = Math.floor(intDiff / (60 * 60)) - (day * 24);  
          minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);  
          second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);  
          if(hour <=9) hour = '0' + hour;  
          if (minute <= 9) minute = '0' + minute;  
          if (second <= 9) second = '0' + second;  
          dates.datetime[i].dat--;  
          var str=hour+':'+minute+':'+ second      
          // console.log(str)      
        }else{  
          var str = "已结束！";  
          clearInterval(timer);    
        }  
        // console.log(str);  
        dates.datetime[i].difftime = str;//在数据中添加difftime参数名，把时间放进去  
      }  
      that.setData({  
        wearList: dates  
      })  
      // console.log(that)  
    }  
  
    nowTime();  
    var timer = setInterval(nowTime, 1000);  
  
  }  
})

2、wxml文件代码如下：

<view wx:for="{{wearList.datetime}}" wx:for-item="item" wx:key="id">  
  <view class='dates'>{{item.difftime}}</view>  
</view>

3、相关测试文件数据js文件：

var dates=[  
  {  
    dat:324235235  
  },  
  {  
    dat:7200000  
  },  
  {  
    dat:675875754  
  }  
]  
  
module.exports = {  
  datetime: dates  
}

模板简介：该模板名称为【实现微信小程序列表页中显示多个批量倒计时共存的方法】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。