zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    你可能不知道的 30 个 Python 语言的特点技巧
    正则替换sql为动态sql
    列表按指定个数分割后格式化输出
    多线程队列下载天涯帖子
    多线程下载图片
    sublime text3 运行python配置
    01_什么是接口测试
    02_Fiddler使用
    01_Fiddler安装
    05_功能测试
  • 原文地址:https://www.cnblogs.com/ximiximi-blog/p/10577360.html
Copyright © 2011-2022 走看看