vue中数字变化滚动效果

原文链接如下: https://www.jb51.net/article/143262.htm ,本人在此基础上根据个人项目稍作修改 !

滚动组件部分代码如下:

<template>
  <div class="number-grow-warp">
    <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span>
 </div>
</template>
<style scoped>
.number-grow-warp{
 transform: translateZ(0);
}
.number-grow {
  display: block;
}
</style>

<script>
export default {
 props: {
  time: {
   type: Number,
   default:2
  },
  value: {
   type: Number,
   default:0
  }
 },
 data(){
   return {
     values:0
   }
 },
 watch: {
  value(val){
    if(val > 0){
      this.values = val;
      this.numberGrow(this.$refs.numberGrow)
    }
  }
 },
 methods: {
  numberGrow (ele) {
   let step = parseInt((this.values * 10) / (this.time * 1000))
   let current = 0
   let start = 0
   let t = setInterval(() =>{
    start += step
    if (start > this.values) {
     clearInterval(t)
     start = this.values
     t = null
    }
    if(start == 0){
      start = this.values;
      clearInterval(t)
    }
    if (current === start) {
     return
    }
    current = start
    ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
   }, 10)
  }
 },
}
</script>

引用 & 使用 如下:

import numberScroll from "../../components/number-scroll/number-scroll.vue";
<number-scroll :time="1" :value="allCount"></number-scroll>

• • 欢迎光临