vue 数字动画递增_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,')

}, 10)

}

},

mounted () {

this.numberGrow(this.$refs.numberGrow)

}

}

.number-grow-warp{

transform: translateZ(0);

}

.number-grow {

font-family: Arial-BoldMT;

font-size: 64px;

color: #ffaf00;

letter-spacing: 2.67px;

margin:110px 0 20px;

display: block;

line-height:64px;

}

调用：

总结

以上所述是小编给大家介绍的开发者网站的支持！