vue 实现数字滚动增加效果的实例代码

项目中需要做数字滚动增加的效果，一开始很懵，研究了一下原理，发现很简单，贴出来分享一下 ^_^

数字滚动组件：

<template><div class="number-grow-warp"> <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span> </div></template><script>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) }}</script><style>.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;}</style>

调用：

<NumberGrow :value="720000"></NumberGrow>

总结

以上所述是小编给大家介绍的vue 实现数字滚动增加效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对错新站长站网站的支持！