快捷導(dǎo)航

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

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

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

項(xiàng)目中需要做數(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>

調(diào)用：

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

總結(jié)

以上所述是小編給大家介紹的vue 實(shí)現(xiàn)數(shù)字滾動增加效果的實(shí)例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

淺談Vue入門需掌握的知識
這篇文章主要介紹了淺談Vue入門需掌握的知識，感興趣的同學(xué)參考下
2021-04-04
vue.js 獲取當(dāng)前自定義屬性值
本篇文章主要介紹了vue.js 獲取當(dāng)前自定義屬性值，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決
這篇文章主要介紹了vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
vue項(xiàng)目前端微信JSAPI與外部H5支付相關(guān)實(shí)現(xiàn)過程及常見問題
這篇文章主要介紹了vue項(xiàng)目前端微信JSAPI與外部H5支付相關(guān)實(shí)現(xiàn)過程及常見問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
詳解Vue中watch的高級用法
我們通過實(shí)例代碼給大家分享了Vue中watch的高級用法，對此知識點(diǎn)有需要的朋友可以跟著學(xué)習(xí)下。
2018-05-05
基于Vue實(shí)現(xiàn)手勢簽名
這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)手勢簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
在vue中使用screenfull?依賴,實(shí)現(xiàn)全屏組件方式
這篇文章主要介紹了在vue中使用screenfull?依賴，實(shí)現(xiàn)全屏組件方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
Vue?關(guān)于Store的用法小結(jié)
Vue?Store是的狀態(tài)管理模式和庫,它提供了一種集中存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,這篇文章主要介紹了Vue?關(guān)于Store的用法,需要的朋友可以參考下
2024-08-08
富文本編輯器quill.js?開發(fā)之自定義插件示例詳解
這篇文章主要為大家介紹了富文本編輯器quill.js?開發(fā)之自定義插件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-08-08
vue-router的beforeRouteUpdate不觸發(fā)問題
這篇文章主要介紹了vue-router的beforeRouteUpdate不觸發(fā)問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04