vue实现数字滚动

Vue 实现数字滚动效果

数字滚动效果可以通过多种方式实现，以下是几种常见的方法：

使用 CSS 动画实现基础滚动

通过 CSS 的 transform 和 transition 属性实现数字的垂直滚动效果。

<template>
  <div class="number-scroll">
    <div class="digit" v-for="(digit, index) in digits" :key="index">
      <div class="digit-inner" :style="{ transform: `translateY(-${digit * 10}%)` }">
        <span v-for="n in 10" :key="n">{{ n % 10 }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  computed: {
    digits() {
      return String(this.value).split('').map(Number);
    }
  }
};
</script>

<style>
.number-scroll {
  display: flex;
  overflow: hidden;
  height: 1em;
  line-height: 1em;
}

.digit {
  position: relative;
  height: 1em;
  width: 0.6em;
  overflow: hidden;
}

.digit-inner {
  position: absolute;
  transition: transform 1s ease-in-out;
}

.digit-inner span {
  display: block;
  height: 1em;
}
</style>

使用 GSAP 实现平滑滚动

GSAP 提供了更强大的动画控制能力，适合实现更复杂的滚动效果。

<template>
  <div ref="numberContainer" class="number-scroll"></div>
</template>

<script>
import { gsap } from 'gsap';

export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  mounted() {
    this.animateNumber();
  },
  watch: {
    value() {
      this.animateNumber();
    }
  },
  methods: {
    animateNumber() {
      gsap.to(this.$refs.numberContainer, {
        innerText: this.value,
        duration: 1,
        snap: { innerText: 1 },
        ease: 'power1.out'
      });
    }
  }
};
</script>

使用第三方库 vue-countup

vue-countup 是专门为 Vue 开发的数字滚动组件，使用简单且功能强大。

安装依赖：

npm install vue-countup

使用示例：

<template>
  <count-up 
    :end-val="value" 
    :duration="2" 
    :options="options"
  />
</template>

<script>
import CountUp from 'vue-countup';

export default {
  components: { CountUp },
  data() {
    return {
      value: 1000,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.'
      }
    };
  }
};
</script>

自定义 JavaScript 实现

通过 JavaScript 定时器实现数字递增效果，适用于简单的计数场景。

<template>
  <div>{{ currentValue }}</div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    duration: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      currentValue: 0,
      increment: 0
    };
  },
  mounted() {
    this.startAnimation();
  },
  watch: {
    value() {
      this.startAnimation();
    }
  },
  methods: {
    startAnimation() {
      const steps = 60;
      const difference = this.value - this.currentValue;
      this.increment = difference / steps;

      let step = 0;
      const timer = setInterval(() => {
        step++;
        this.currentValue += this.increment;

        if (step >= steps) {
          this.currentValue = this.value;
          clearInterval(timer);
        }
      }, this.duration / steps);
    }
  }
};
</script>

以上方法各有优劣，可根据项目需求选择最适合的实现方式。CSS 动画适合简单场景，GSAP 提供更专业的动画控制，第三方库可以快速集成，自定义实现则更加灵活。