当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue 实现数字滚动增加效果的实例代码

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

2018年08月06日  | 移动技术网IT编程  | 我要评论

夜送孟功曹,王智胸围,win732位系统

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

数字滚动组件：

<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 实现数字滚动增加效果的实例代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网