微信小程序一招解决倒计时

针对一个页面列表中多个倒计时的难题

解决思路： 计时器单放一个数组，由于要实时操做，避免列表数据过大操做太笨重。 根据计时器列表的index 与列表数据的 index 相对，去找到本身对应的倒计时器。 页面刷新数据时要先 清除全部定时器 ，再从新加载，否则会出现连跳或者秒数来回跳动的问题。

// data里声明  
timerList: [],
allTimerList: []

// js 传入秒数 与 index
timerhandle(timeSeconds,index){
    if (timeSeconds){
      this.setData({
        ['timerList[' + index + ']']: [parseInt(timeSeconds/60/60%24), parseInt(timeSeconds/60%60), parseInt(timeSeconds%60)]
      },()=>{
        let timer = setInterval(() => {
          timeSeconds--
          // 倒计时到0，能够加入自定义函数处理
          if (timeSeconds <= 0) {
            clearInterval(timer)
          }
          this.setData({
            ['timerList[' + index + ']']: [parseInt(timeSeconds / 60 / 60 % 24), parseInt(timeSeconds / 60 % 60), parseInt(timeSeconds % 60)]
          })
        }, 1000)
        let ll = this.data.allTimerList
        ll.push(timer)
        this.setData({ allTimerList: ll })
      })
    }else{
      this.setData({
        ['timerList[' + index + ']']: ['00','00','00']
      })
    }
    
  },
  // 清除定时器
  clearAllTimer() {
  	 this.data.allTimerList.forEach((el, index) => {
        clearInterval(el)
      })
      this.setData({ allTimerList: [], timerList: [] },()=>{
		
      })
  }
复制代码