方法一:手写 JS 方法
/* 数字滚动动画 */
numScroll(startNum, maxNum) {
const that = this;
let numText = startNum;
let animateFrame; // 清除 requestAnimationFrame 请求动画帧
// 数字动画
function digitalAnimation() {
numText += 5; // 速度的计算可以为小数 。数字越大,滚动越快
if (numText >= maxNum) {
numText = maxNum;
cancelAnimationFrame(animateFrame);
} else {
animateFrame = requestAnimationFrame(digitalAnimation); // 请求动画帧(一个浏览器的宏任务)
}
that.amount = numText;
}
digitalAnimation(); // 数字动画
}
完整代码
<template>
<div>
<div @click="numScroll(0, 520)">滚动</div>
<div>{
{ amount }}</div>
</div>
</template>
<script>
export default {
data() {
return {
amount: 0,
};
},
methods: {
/* 数字滚动动画 */
numScroll(startNum, maxNum) {
const that = this;
let numText = startNum;
let animateFrame; // 清除 requestAnimationFrame 请求动画帧
// 数字动画
function digitalAnimation() {
numText += 5; // 速度的计算可以为小数 。数字越大,滚动越快
if (numText >= maxNum) {
numText = maxNum;
cancelAnimationFrame(animateFrame);
} else {
animateFrame = requestAnimationFrame(digitalAnimation); // 请求动画帧(一个浏览器的宏任务)
}
that.amount = numText;
}
digitalAnimation(); // 数字动画
}
}
};
</script>
<style scoped></style>
方法二:使用 vue-count-to 插件
vue-count-to 是一个没有依赖的轻量级 vue 组件,可以自行覆盖 EasingFn。可以设置 startVal 和 endVal,它会自动判断计数进行数字渲染。
npm install vue-count-to
<template>
<div>
<CountTo :startVal="startVal" :endVal="endVal" :duration="duration" />
</div>
</template>
<script>
import CountTo from "vue-count-to";
export default {
components: { CountTo },
data() {
return {
startVal: 0, // 开始值
endVal: 100, // 开始值
duration: 3000, // 持续时间(毫秒为单位)
timer: null // 定时器
};
},
mounted() {
this.timer = setInterval(() => {
this.endVal = this.endVal * 2;
}, 4000);
},
destroyed() {
clearInterval(this.timer);
}
};
</script>
<style scoped></style>
参数选项:
属性 | 描述 | 类型 | 默认 |
startVal | 开始值 | Number | 0 |
endVal | 结束值 | Number | 2017 |
duration | 持续时间,以毫秒为单位 | Number | 3000 |
autoplay | 自动播放 | Boolean | true |
decimals | 要显示的小数位数 | Number | 0 |
decimal | 十进制分割 | String | . |
separator | 分隔符 | String | , |
prefix | 前缀 | String | "" |
suffix | 后缀 | String | "" |
useEasing | 使用缓和功能 | Boolean | true |
easingFn | 缓和回调 | Function | — |
注意:当autoplay:true时,它将在startVal或endVal更改时自动启动
函数名称 | 描述 |
mountedCallback | 挂载以后返回回调 |
start | 开始计数 |
pause | 暂停计数 |
reset | 重置countTo |