本文分享了如何在Vue项目中实现数字滚动增加的组件代码。通过设置定时器和步长，平滑地更新数字并显示。在组件挂载后调用方法，确保数字从零递增到指定值，并在达到目标值时停止。样式设置使得数字显示更加清晰易读。
项目中需要做数字滚动增加的效果，一开始很懵，研究了一下原理，发现很简单，贴出来分享一下 ^_^
数字滚动组件：
0
export default {
props: {
time: {
type: Number,
default: 2
},
value: {
type: Number,
default: 720000
}
},
methods: {
numberGrow (ele) {
let _this = this
let step = (_this.value * 10) / (_this.time * 1000)
let current = 0
let start = 0
let t = setInterval(function () {
start += step
if (start > _this.value) {
clearInterval(t)
start = _this.value
t = null
}
if (current === start) {
return
}
current = start
ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,'
最低0.47元/天 解锁文章
扫一扫
2513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
