欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue數字金額動態(tài)變化功能實現方法詳解

 更新時間:2022年09月15日 08:39:33   作者:Saga?Two  
這篇文章主要介紹了vue實現數字金額動態(tài)變化效果,數字動態(tài)變化是我們在前端開發(fā)中經常需要做的效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧

1 前言

  在某些場景中,要求我們能夠動態(tài)與用戶進行交互,如頁面加載一個數字的時候,動態(tài)改變一個固定地數字,然后將數字展現在頁面上,如當前的積分或者余額等;以達到提高與用戶交互體驗的效果。下面我們就在vue中使用兩種方法來實現數字動態(tài)滾動效果。

2 數字動態(tài)滾動

2.1 計時器實現

先上效果:

  以上效果是點擊按鈕加載金額,實際情況是頁面加載的時候就需要。這個時候我們需要在頁面加載的時候執(zhí)行用該方法。以上實例用到的代碼如下:

代碼:

<template>
  <div>
    <title-bar :title="title" @goBack="goback"></title-bar>
     <div class="amount-box">
      <label>您的余額為:</label>
      <label>{{ amountFormatPage }}</label>
    </div>
    <t-button @clickhandle="changeAmount" name="計時器"></t-button>
  </div>
</template>
<script>
import TitleBar from "@/components/TitleBar";
import tButton from "@/components/TButton";
import { amountFormat } from "@/util/utils";
export default {
  components: {
    TitleBar,
    tButton
  },
  data() {
    return {
      res: false, //
      title: "動態(tài)變化金額",
      amount: 0, //初始amout
      amoutFrame: 0,
      amountShow: 0
    };
  },
  computed: {
    // 計算屬性格式化頁面金額
    amountFormatPage() {
      return amountFormat(this.amount);
    }
  },
  methods: {
    changeAmount() {
      const total = 16000; //設置初始總金額
      const _this = this;
      let i = 0;
      //變化15次,每次間隔30毫秒
      const amoutInterval = setInterval(() => {
        if (i < 15) {
          i++;
          _this.amount = (total * i) / 15;
        } else {
          clearInterval(amoutInterval);
        }
      }, 30);
    },
    goback() {
      //
    }
  }
};
</script>
<style lang="scss" scoped>
.amount-box {
  label {
    display: box;
  }
}
</style>

除了這個效果以外,我們可以通過調節(jié)計時器的間隔時間來控制金額變化的速度;通過調節(jié)i的大小來控制變化的次數。主要是控制這兩個參數來達到我們想要的效果。

2.2 動畫幀實現

實現效果如下:

vue代碼如下:

<template>
  <div>
    <title-bar :title="title" @goBack="goback"></title-bar>
    <div>
      <label>您的余額為:</label>
      <label>{{ amountShow }}</label>
    </div>
    <t-button @clickhandle="changeAmountFrame" name="動畫幀"></t-button>
  </div>
</template>
<script>
import TitleBar from "@/components/TitleBar";
import tButton from "@/components/TButton";
import { amountFormat } from "@/util/utils";
export default {
  components: {
    TitleBar,
    tButton
  },
  data() {
    return {
      res: false, //
      title: "動態(tài)變化金額",
      amount: 0, //初始amout
      amoutFrame: 0,
      amountShow: 0
    };
  },
  methods: {
    changeAmountFrame() {
      const total = 26666;
      const frameNum = 60;
      const _this = this;
      let animation = window.requestAnimationFrame(function f() {
        if (_this.amoutFrame < total) {
          _this.amoutFrame = _this.amoutFrame + total / frameNum;
          // 動畫繼續(xù)
          animation = window.requestAnimationFrame(f);
        } else {
          _this.amoutFrame = total;
          // 動畫停止
          window.cancelAnimationFrame(f);
        }
        _this.amountShow = amountFormat(_this.amoutFrame);
      });
    },
    goback() {
      //
    }
  }
};
</script>
<style lang="scss" scoped>
.amount-box {
  label {
    display: box;
  }
}
</style>

window.requestAnimationFrame()是執(zhí)行動畫幀的關鍵方法,對應window.cancelAnimationFrame()是停止動畫幀的方法。其中動畫幀的價格時間一把為16ms,同上,通過調節(jié)framenum參數來控制一共播放多少幀,來達到我們想要的效果。

3 總結

  本次用兩種方法實現金額數字等動態(tài)變化,偏向應用領域,若想了解即使器和動畫幀的更深層次原理,請一部專業(yè)網站或者動手艙室一下。

到此這篇關于vue數字金額動態(tài)變化功能實現方法詳解的文章就介紹到這了,更多相關vue數字動態(tài)變化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue自定義組件如何通過v-model指令控制組件的隱藏、顯示

    vue自定義組件如何通過v-model指令控制組件的隱藏、顯示

    這篇文章主要介紹了vue自定義組件如何通過v-model指令控制組件的隱藏、顯示,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • vue中computed順序、watch順序、響應次數使用

    vue中computed順序、watch順序、響應次數使用

    這篇文章主要介紹了vue中computed順序、watch順序、響應次數使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • vue 中 element-ui table合并上下兩行相同數據單元格

    vue 中 element-ui table合并上下兩行相同數據單元格

    這篇文章主要介紹了vue 中 element-ui table合并上下兩行相同數據單元格,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12
  • Vue.js手風琴菜單組件開發(fā)實例

    Vue.js手風琴菜單組件開發(fā)實例

    這篇文章主要為大家詳細介紹了Vue.js手風琴菜單組件開發(fā)實例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • vue中實現checkbox回顯效果

    vue中實現checkbox回顯效果

    這篇文章主要介紹了vue中實現checkbox回顯效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • vue?scoped與深度選擇器deep的原理分析

    vue?scoped與深度選擇器deep的原理分析

    這篇文章主要介紹了vue?scoped與深度選擇器deep的原理分析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue.js初學入門教程(1)

    vue.js初學入門教程(1)

    這篇文章主要為大家詳細介紹了vue.js初學入門教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • Vue?socket.io模塊實現聊天室流程詳解

    Vue?socket.io模塊實現聊天室流程詳解

    vue-socket.io其實是在socket.io-client(在瀏覽器和服務器之間實現實時、雙向和基于事件的通信)基礎上做了一層封裝,將socket掛載到vue實例上,同時可使用sockets對象輕松實現組件化的事件監(jiān)聽,在vue項目中使用起來更方便
    2022-12-12
  • Vue項目部署到IIS后刷新報錯404的問題及解決方法

    Vue項目部署到IIS后刷新報錯404的問題及解決方法

    這篇文章主要介紹了Vue項目部署到IIS后,刷新報錯404,這里需要用到URL重寫工具?--URL?Rewrite,需要的話需要自己下載安裝,本文通過圖文并茂的形式給大家介紹的非常詳細,需要的朋友可以參考下
    2022-10-10
  • 利用Vue3+Element-plus實現大文件分片上傳組件

    利用Vue3+Element-plus實現大文件分片上傳組件

    在開發(fā)中如果上傳的文件過大,可以考慮分片上傳,分片就是說將文件拆分來進行上傳,將各個文件的切片傳遞給后臺,然后后臺再進行合并,下面這篇文章主要給大家介紹了關于利用Vue3+Element-plus實現大文件分片上傳組件的相關資料,需要的朋友可以參考下
    2023-01-01

最新評論