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

来源：动视网责编：小采时间：2020-11-27 22:11:56

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

vue 实现数字滚动增加效果的实例代码:项目中需要做数字滚动增加的效果，一开始很懵，研究了一下原理，发现很简单，贴出来分享一下 ^_^ 数字滚动组件： <template> <div class=number-grow-warp> <span ref=numberGrow :data-time=time

推荐度：

点击下载本文 文档为doc格式

导读vue 实现数字滚动增加效果的实例代码:项目中需要做数字滚动增加的效果，一开始很懵，研究了一下原理，发现很简单，贴出来分享一下 ^_^ 数字滚动组件： <template> <div class=number-grow-warp> <span ref=numberGrow :data-time=time

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

数字滚动组件：

<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 实现数字滚动增加效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

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

推荐度：

点击下载本文 文档为doc格式

标签： VUE 实现代码

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐