vue实现数字递增滚动
Vue 实现数字递增滚动效果
在 Vue 中实现数字递增滚动效果可以通过多种方式完成，以下提供两种常见方法：
使用定时器和计算属性
<template>
<div>{{ animatedNumber }}</div>
</template>
<script>
export default {
data() {
return {
targetNumber: 1000,
currentNumber: 0,
animationDuration: 2000,
startTime: null
}
},
computed: {
animatedNumber() {
return Math.floor(this.currentNumber)
}
},
mounted() {
this.animateNumber()
},
methods: {
animateNumber(timestamp) {
if (!this.startTime) this.startTime = timestamp
const progress = Math.min((timestamp - this.startTime) / this.animationDuration, 1)
this.currentNumber = progress * this.targetNumber
if (progress < 1) {
requestAnimationFrame(this.animateNumber)
}
}
}
}
</script>使用第三方库（如 vue-count-to）
安装 vue-count-to 库：
npm install vue-count-to --save使用示例：
<template>
<count-to :start-val="0" :end-val="1000" :duration="2000"></count-to>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
components: { CountTo }
}
</script>自定义过渡效果
可以通过 CSS 过渡增强视觉效果：
.number-transition {
transition: all 0.5s ease-out;
}结合 Vue 的 transition 组件：
<transition name="number-transition">
<div :key="animatedNumber">{{ animatedNumber }}</div>
</transition>注意事项
- 性能优化：对于大量数字动画，考虑使用 requestAnimationFrame
- 格式化：可使用 toLocaleString() 方法添加千位分隔符
- 中断处理：组件销毁时应清除动画帧请求
以上方法可根据具体需求选择，第三方库方案更简单快捷，自定义实现则更灵活可控。
