欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

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

    2018-05-11 09:38 来源/作者:懒人模板 分类:小程序教程  « »
    如何实现微信小程序列表多个批量倒计时?
    我们思路是:先把时间打印出来,放在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  
    }  
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议