vue 实现 多个 数字滚动增加动效

参考网上其他同学写的 具体出处忘了，不然一定贴上，有问题请联系。

图一是具体js代码；二是设置定时器；三是dom节点需要写ref

numberGrow (ele) {
      this.summaryData.forEach((eachVal, index) => {
        let _this = this
        let step = parseInt((eachVal.num * 10) / (_this.time * 1000))
        let current = 0
        let start = 0
        let t = setInterval(function () {
          start += step
          if (start > eachVal.num) {
            clearInterval(t)
            start = eachVal.num
            t = null
          }
          if (current === start) {
            return
          }
          current = start
          ele[index].innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
        }, 10)
      })
    },

mounted () {
    const that = this

    const timer = setInterval(function () {

　　　　that.numberGrow(that.$refs.numberGrow)

    }, 4000) 

// 赠送  --------  跳转其他页面 清除定时器，通过$once来监听定时器，在beforeDestroy钩子可以被清除。 

this.$once('hook:beforeDestroy', () => { clearInterval(timer) }) 

}

<li v-for="(item, index) in summaryData" :key="index">
          <p ref="numberGrow"
            :data-time="time"
            :data-value="item.num"></p>
          <p class="summary-tit">{{item.title}}</p>
        </li>

 

转载于:https://www.cnblogs.com/ximiximi-blog/p/10577360.html