vue.js如何实现数字滚动增加效果?代码示例

 5038

5fc723bd68231.jpg


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

数字滚动组件:

  1. <template>
  2.     <p class="number-grow-warp">
  3.         <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span>
  4.     </p>
  5. </template> 
  6. <script> export default {
  7.     props: {
  8.         time: {
  9.             type: Number,
  10.             default: 2
  11.         },
  12.         value: {
  13.             type: Number,
  14.             default: 720000
  15.         }
  16.     },
  17.     methods: {
  18.         numberGrow (ele) {
  19.             let _this = this
  20.             let step = (_this.value * 10) / (_this.time * 1000)
  21.             let current = 0
  22.             let start = 0
  23.             let t = setInterval(function () {
  24.                 start += step
  25.                 if (start > _this.value) {
  26.                     clearInterval(t)
  27.                     start = _this.value
  28.                     t = null
  29.                 }
  30.                 if (current === start) {
  31.                     return
  32.                 }
  33.                 current = start
  34.                 ele.innerHTML = current.toString().replace(/(d)(?=(?:d{3}[+]?)+$)/g, '$1,')
  35.             }, 10)
  36.         }
  37.     },
  38.     mounted () {
  39.         this.numberGrow(this.$refs.numberGrow)
  40.     }
  41. }
  42. </script> 
  43. <style>
  44. .number-grow-warp{
  45.     transform: translateZ(0);
  46. }
  47. .number-grow {
  48.     font-family: Arial-BoldMT;
  49.     font-size: 64px;
  50.     color: #ffaf00;
  51.     letter-spacing: 2.67px;
  52.     margin:110px 0 20px;
  53.     display: block;
  54.     line-height:64px;
  55. }
  56. </style>

调用:

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



本文网址:https://www.zztuku.com/detail-8596.html
站长图库 - vue.js如何实现数字滚动增加效果?代码示例
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐