vue3 数字滚动

<template>
  <div class="number-scroll">
    <span>{{ formattedNumber }}</span>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  start: {
    type: Number,
    default: 0
  },
  end: {
    type: Number,
    default: 100
  },
  duration: {
    type: Number,
    default: 2000 // 持续时间，单位为毫秒
  }
});

const currentNumber = ref(props.start);
const formattedNumber = ref(props.start.toFixed(0));

const scrollNumber = () => {
  const startTime = performance.now();
  const animate = (timestamp) => {
    const elapsedTime = timestamp - startTime;
    const progress = Math.min(elapsedTime / props.duration, 1);
    currentNumber.value = props.start + (props.end - props.start) * progress;
    formattedNumber.value = currentNumber.value.toFixed(0);

    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  };

  requestAnimationFrame(animate);
};

onMounted(() => {
  scrollNumber();
});
</script>

<style scoped>
.number-scroll {
  font-size: 2em;
  font-weight: bold;
}
</style>

解释说明：

1. 模板部分 (<template>)：

   • 使用了一个 span 标签来显示滚动的数字。
   • 绑定了 formattedNumber 变量，用于展示当前的数字。

2. 脚本部分 (<script setup>)：

   • 引入了 Vue 3 的 Composition API，使用 ref 和 onMounted。
   • 定义了组件的属性（props），包括起始值 start、结束值 end 和持续时间 duration。
   • currentNumber 和 formattedNumber 是响应式变量，分别存储当前的数字和格式化后的数字。
   • scrollNumber 函数实现了数字滚动效果，使用 requestAnimationFrame 来平滑地更新数字。
   • onMounted 钩子在组件挂载时启动数字滚动动画。

3. 样式部分 (<style scoped>)：

   • 简单的样式定义，设置了数字显示的字体大小和粗细。