vue 實現(xiàn)數(shù)字滾動增加效果的實例代碼

更新時間：2018年07月06日 09:19:08 作者：澤浩沉

最近做了個項目需要做數(shù)字滾動增加的效果，剛開始接到這個項目還真是懵了，后來發(fā)現(xiàn)實現(xiàn)代碼很簡單的，下面小編給大家?guī)砹藇ue 實現(xiàn)數(shù)字滾動增加效果的實例代碼，需要的朋友參考下吧

項目中需要做數(shù)字滾動增加的效果，一開始很懵，研究了一下原理，發(fā)現(xiàn)很簡單，貼出來分享一下 ^_^

數(shù)字滾動組件：

<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 實現(xiàn)數(shù)字滾動增加效果的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

Vue.js實現(xiàn)的購物車功能詳解
這篇文章主要介紹了Vue.js實現(xiàn)的購物車功能,結合實例形式分析了vue.js購物車的原理、數(shù)值計算及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2019-01-01
vue中項目如何提交form格式數(shù)據(jù)的表單
這篇文章主要介紹了vue中項目如何提交form格式數(shù)據(jù)的表單，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
$解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因為在此系統(tǒng)上禁止運行腳本$
解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,
這篇文章主要給大家介紹了關于解決vue無法加載文件D:\Program Files\nodejs\node_global\vue.ps1,因為在此系統(tǒng)上禁止運行腳本的相關資料,這個報錯是由于在系統(tǒng)上禁止運行腳本導致的,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2024-01-01
Vue頁面刷新記住頁面狀態(tài)的實現(xiàn)
這篇文章主要介紹了Vue頁面刷新記住頁面狀態(tài)的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-12-12
在Vue3中創(chuàng)建和使用全局組件的實現(xiàn)方式
在前端開發(fā)中,Vue.js 是一個廣泛使用的框架,因其靈活性和強大的功能,得到許多開發(fā)者的喜愛,Vue 3 的發(fā)布為這一框架帶來了很多新的特性和改進,在本文中,我們將詳細討論如何在 Vue 3 中創(chuàng)建和使用全局組件,并通過示例代碼展示具體實現(xiàn)方式,需要的朋友可以參考下
2024-07-07
vue 表單輸入框不支持focus及blur事件的解決方案
這篇文章主要介紹了vue 表單輸入框不支持focus及blur事件的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue3使用localStorage實現(xiàn)登錄注冊功能實例
這篇文章主要給大家介紹了關于vue3使用localStorage實現(xiàn)登錄注冊功能的相關資料, localStorage這個特性主要是用來作為本地存儲來使用的,解決了cookie存儲空間不足的問題,需要的朋友可以參考下
2023-06-06
解決element-ui?el-drawer抽屜el-dialog彈框關閉優(yōu)化demo
這篇文章主要為大家介紹了解決element-ui?el-drawer抽屜el-dialog彈框關閉優(yōu)化demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>
2023-06-06
vue分割面板封裝實現(xiàn)記錄
這篇文章主要為大家詳細介紹了vue分割面板封裝實現(xiàn)記錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
Uniapp 實現(xiàn)頂部標簽頁切換功能(詳細步驟)
本文介紹了如何在UniApp中實現(xiàn)頂部標簽頁切換功能,u-tab-bar組件提供了便捷的標簽切換功能和豐富的樣式選項,而swiper組件則更加靈活,支持自定義切換方式,根據(jù)自己的需求選擇合適的方式實現(xiàn)頂部標簽頁切換,感興趣的朋友一起看看吧
2025-02-02