站长图库向大家介绍了vue.js,数字滚动增加,滚动效果,代码示例等相关知识,希望对您有所帮助
项目中需要做数字滚动增加的效果，一开始很懵，研究了一下原理，发现很简单，贴出来分享一下 ^_^
数字滚动组件：
<template> <p class="number-grow-warp"> <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span> </p></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>