uni-app项目实现v-for列表中的每一项独立计时

前言:

由于工作项目需求,需要实现功能:在一个展示设备信息的设备列表中,如果设备处于警告状态,则该设备会有一个发生警告的时间点,需要根据时间点计算发生警告至今的时间,且要求是动态的(即每秒刷新一次,类似时钟)。

之前做过根据一个时间点来计时的功能,但那是只有一项的情况。所以,难点是在v-for列表中实现多项计时。经过网查和摸索,实现效果,记录一下。

一、直接上代码

  data() {
    return {
      deviceList: [],
      timer: ''
    }
  },

1、请求接口拿到设备列表后处理数据

      getDeviceList().then(res => {
        let deviceList = res.rows || []
        this.deviceList = deviceList.map(item => {
          // 该参数有值则为警告状态设备,计算发生警告至今的时间(单位毫秒),用于计时
          if (item.alarmTime) {
            item.count_time = new Date().getTime() - new Date(item.alarmTime).getTime()
          }
          return item
        })
        // 执行定时器的函数,定时器周期为1秒
        this.beginTimer()
      })

2、设置定时器,每秒刷新一次设备列表deviceList的数据。

关键点:一定要重新给deviceList赋值,否则页面不会刷新。下面的定时器中map返回的是一个新数组。

    // 定时器 设备列表里的警告设备,count_time每秒加1000毫秒,以刷新页面计时
    beginTimer() {
      this.timer = setInterval(() => {
        this.deviceList = this.deviceList.map(item => {
          // 有count_time参数的则为警告设备
          if (item.count_time) item.count_time = item.count_time + 1000
          return item
        })
        // console.log(this.deviceList)
      }, 1000)
    }

3、现在每个警告设备里都有一个count_time参数实时计时,单位是毫秒,通过过滤器转换成时钟格式。

 filters: {
    // 把毫秒数换算成时分秒
    timeFilter(time) {
      if (time >= 0) {
        let h = Math.floor(time / 1000 / 60 / 60)
        h = h < 10 ? '0' + h : h
        let m = Math.floor((time / 1000 / 60) % 60);
        m = m < 10 ? '0' + m : m
        let s = Math.floor((time / 1000) % 60);
        s = s < 10 ? '0' + s : s
        return `${h}:${m}:${s}`
      }
      else return ''
    }
  },

4、页面展示


  
    
    {{ item.count_time | timeFilter }}
  

5、卸载页面时清除定时器

  // 监听页面卸载,清除计时器
  onUnload() {
    clearInterval(this.timer)
  },

已实现预想效果。

记录于2021/09/04。

你可能感兴趣的:(uniapp,前端,问题及解决方法专栏,vue.js,uni-app)