vuejs数字动态滚动效果封装

方法一：

numFun(startNum, maxNum, num, name) {
  var that = this
  let numText = startNum;
  let golb; // 为了清除requestAnimationFrame
  function numSlideFun(){ // 数字动画
	  numText+=5; // 速度的计算可以为小数 。数字越大，滚动越快
	  if(numText >= maxNum){
		  numText = maxNum;
		  cancelAnimationFrame(golb);
	  }else {
		  golb = requestAnimationFrame(numSlideFun);
	  }
	that.amount=numText
	// console.log(numText)
  }
   numSlideFun(); // 调用数字动画
}

调用方法：

this.numFun(startNum, maxNum, num, name)
//startNum：开始数
//maxNum：结束数
//num：滚动大小
//name：可以通过这个字段显示多个滚动

方法二：vue自动方法

npm install vue-count-to

案例

<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
 
<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 2017
      }
    }
  }
</script>

以上是编程学习网小编为您介绍的“vuejs数字动态滚动效果封装”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。