列表内容出现倒计时

列表内容出现倒计时

从后台接口获取数据

getGameList() {
        api.getList().then(data => {
          if (data) {
            this.gameDataList = data.resultData;
            for (let i = 0; i < this.gameDataList.length; i++) {
              this.gameDataList[i].surplus = this.gameDataList[i].endTime - new Date().getTime(); //给列表加属性，剩余时间字段
            }
            this.total = data.totalRecord;
            this.beginTimer(); //启动计时器减指定字段的时间
          }
        })
      },

2.运用定时器实时减去时间

//定时器
      beginTimer() {
        if (this.timer != null) {
          clearInterval(this.timer);
        }
        this.timer = setInterval(() => {
          for (let i = 0, len = this.gameDataList.length; i < len; i++) {
            const item = this.gameDataList[i];
            if (item.surplus > 0) {
              item.surplus = Math.abs(item.surplus - 1000);
              this.$set(item, 'surplus', item.surplus);
            }
          };
          this.$forceUpdate(); //这句很重要，要不列表不刷新
        }, 1000);
      },

标签：surplus,gameDataList,timer,列表,倒计时,item,内容,data
来源： https://blog.csdn.net/weixin_46156770/article/details/112518837