小程序秒杀商城列表循环倒计时功能

欢迎加我技术交流QQ群 ：811956471

html:
<view class="flex_l_r_c" wx:for="{{listData}}" wx:key="id">
    <view>{{item.id}}</view>
    <view>{{item.memberNickname}}</view>
    <view>{{item.countDown}}</view>
     <view wx:if="{{item.remainTime<0}}">活动已结束</view>
  </view>

js:
Page({
  data: {
    listData: []
  },

  onLoad: function(options) {
    let list = [{
        id: 1,
        memberNickname: '商品名称1',
        remainTime: 1590824570000
      },
      {
        id: 2,
        memberNickname: '商品名称2',
        remainTime: 1559203226
      },
      {
        id: 3,
        memberNickname: '商品名称3',
        remainTime: 15000
      }
    ];
    this.setData({
      listData: list
    });
    this.setCountDown();
  },

  //倒计时
  setCountDown: function() {
    let time = 1000;
    let listData = this.data.listData;
    let list = listData.map((v, i) => {
      if (v.remainTime < 0) {
        v.remainTime = 0;
      }
      let formatTime = this.getFormat(v.remainTime);
      v.remainTime -= time;
      v.countDown = `${formatTime.day}天${formatTime.h}时${formatTime.m}分${formatTime.s}秒`;
      return v;
    })
    this.setData({
      listData: list
    });
    setTimeout(this.setCountDown, time);
  },

  /**
   * 格式化时间  1590824570   时间戳
   */

  getFormat: function(timeStamp) {
    let [day, hh, mm, ss] = [0, 0, 0, 0]
    day = Math.floor(timeStamp / 1000 / 60 / 60 / 24);
    hh = Math.floor(timeStamp / 1000 / 60 / 60 % 24);
    mm = Math.floor(timeStamp / 1000 / 60 % 60);
    ss = Math.floor(timeStamp / 1000 % 60);
    let h = hh > 9 ? hh : `0${hh}`;
    let m = mm > 9 ? mm : `0${mm}`;
    let s = ss > 9 ? ss : `0${ss}`;
    return {
      day, h, m, s
    };
  },
})