自制数字增加动画组件 -- 将数字动态增加到指定数字

前言

因需要一个将数字动态增加到指定值的小组件，于是在网上搜索，不出所料没有一个实用的答案。全是无脑复制粘贴，所以自己做了这样一个小组件。这个小组可以让单调的数字表现出动画效果，能使得页面显得更有活力。

实现思路

就是使用一个计时器重复叠加直到大于等于目的数值，然后设置数字为目标数字即可；
再一个就是增加滚动监听，当页面看得到计数器时再启动计数。

组件代码

<template>
  <span ref="count">{{num}}</span>
</template>

<script>
export default {
  data(){
    return {
      num: 0,
      counted: false,
      gap: 50
    }
  },
  computed: {
    ts(){
      return Math.floor(this.duration / this.gap)
    },
    add(){
      return Math.floor(this.data / this.ts)
    }
  },
  props: {
    data: Number,
    duration: {
      type: Number,
      default: 1500
    }
  },
  methods: {
    count(){
      this.num = this.num + this.add;
      if(this.num >= this.data)
        return this.num = this.data
      setTimeout(() => this.count(), this.ts)
    },
    isSee(){
      if(this.counted)
        return;
      let st = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      let ch = document.documentElement.clientHeight;
      let ot = this.$refs.count.offsetTop;
      if(ot > st && ot < st + (ch * .88)){
        this.removeListen();
        this.counted = true;
        this.count();
      }
    },
    removeListen(){
      window.removeEventListener('scroll', this.isSee);
    }
  },
  beforeDestroy(){
    this.removeListen();
  },
  mounted(){
    window.addEventListener('scroll', this.isSee);
    this.isSee();
  }
}
</script>

引用示例

//假设组件在当前目录，文件名为Count.vue
//js
import Count from './Count'
export default {
  components: {
    Count
  }
}
//template    可配置duration，功能尚未完善，有需要可自行调整
<Count :data="125"/>