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>

进入前端入门建站教程官网入口

js创建一个指定长度数组(根据数字显示数组长度)

利用es6语法判断字符串是否为数字

javaScript数字格式化方法介绍

纯css3绘制数字，文字太长自动显示...

js数字每三位加逗号代码封装

标签： 封装, 数字

上面是“vuejs数字动态滚动效果封装”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_1889.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！