标签：vue maxNum 数字 value numvalue oldvalue 组件 numText 翻牌

<template>
  <em>{{numvalue}}
  </em>
</template>
<script>
export default {
  props: ['val'],
  data () {
    return { oldvalue: 0, numvalue: 0 }
  },
  methods: {
    numFun (startNum, maxNum) {
      var that = this
      let numText = startNum;
      let addnum = Math.floor((maxNum - startNum) / 10) //10代表数字变化时最大跳动次数
      let golb; // 为了清除requestAnimationFrame
      function numSlideFun () { // 数字动画
        numText += addnum; // 速度的计算可以为小数 。数字越大，滚动越快
        if (numText >= maxNum) {
          numText = maxNum;
          cancelAnimationFrame(golb);
        } else {
          setTimeout(function () {
            golb = requestAnimationFrame(numSlideFun);
          }, 200);//200代表翻牌的频率
        }
        that.numvalue = numText
        // console.log(numText)
      }
      function subtractlideFun () { // 数字动画
        numText += addnum; // 速度的计算可以为小数 。数字越大，滚动越快
        if (maxNum >= numText) {
          numText = maxNum;
          cancelAnimationFrame(golb);
        } else {
          setTimeout(function () {
            golb = requestAnimationFrame(subtractlideFun);
          }, 200);
        }
        that.numvalue = numText
        // console.log(numText)
      }
      if (startNum < maxNum) {
        numSlideFun(); // 递增数字翻牌
      } else {
        subtractlideFun(); // 递减数字翻牌
      }
    }

  },
  watch: {
    val (value) {
      if (value === undefined) {
        this.numvalue = 0
        this.oldvalue = value
      } else {
        if (this.oldvalue === 0) {
          this.numvalue = value;
          this.oldvalue = value
        } else {
          this.numFun(this.oldvalue, value)
          this.oldvalue = value
        }
      }
    }
  }
}
</script>

最近做大屏展示，因为数字非常大到亿以上，要用到数字滚动功能，网上找的都不如意，翻滚的时间久，跳动太快不可控，就自己写了一个。

标签：vue,maxNum,数字,value,numvalue,oldvalue,组件,numText,翻牌
来源： https://www.cnblogs.com/PlatformSolution/p/15580255.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。