Vue实现数字滚动效果

实现数据滚动效果

    offical() {
      this.$axios.get(`${this.$Tools.Conts.domain}official/index`).then(res => {
        if (res.data.code == 0) {
          this.num = res.data.data;
          console.log(res.data.data);
          this.beatNums();
        }
      });
    },
    //数字滚动效果
    beatNums() {
      let num1 = this.num.account_count,
        num2 = this.num.project_count,
        num3 = this.num.cave_count,
        num4 = this.num.city_count;
      this.timer = setInterval(() => {
        let step1 = Math.ceil(num1 / (2000 / 15));
        let step2 = Math.ceil(num2 / (2000 / 15));
        let step3 = Math.ceil(num3 / (2000 / 15));
        let step4 = Math.ceil(num4 / (2000 / 15));
        if (this.num1 >= num1) {
          this.num1 = num1;
        } else {
          this.num1 += step1;
        }
        if (this.num2 >= num2) {
          this.num2 = num2;
        } else {
          this.num2 += step2;
        }
        if (this.num3 >= num3) {
          this.num3 = num3;
        } else {
          this.num3 += step3;
        }
        if (this.num4 >= num4) {
          this.num4 = num4;
        } else {
          this.num4 += step4;
        }
        if (
          this.num1 >= num1 &&
          this.num2 >= num2 &&
          this.num3 >= num3 &&
          this.num4 >= num4
        ) {
          clearInterval(this.timer);
        }
      }, 15);
    }
  }