Rumah > Artikel > hujung hadapan web > vue 实现数字滚动增加效果
这篇文章主要介绍了关于vue 实现数字滚动增加效果 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
项目中需要做数字滚动增加的效果，一开始很懵，研究了一下原理，发现很简单，贴出来分享一下 ^_^
数字滚动组件：
<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>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Atas ialah kandungan terperinci vue 实现数字滚动增加效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!