vue數(shù)字金額動(dòng)態(tài)變化功能實(shí)現(xiàn)方法詳解
1 前言
在某些場(chǎng)景中,要求我們能夠動(dòng)態(tài)與用戶進(jìn)行交互,如頁(yè)面加載一個(gè)數(shù)字的時(shí)候,動(dòng)態(tài)改變一個(gè)固定地?cái)?shù)字,然后將數(shù)字展現(xiàn)在頁(yè)面上,如當(dāng)前的積分或者余額等;以達(dá)到提高與用戶交互體驗(yàn)的效果。下面我們就在vue中使用兩種方法來(lái)實(shí)現(xiàn)數(shù)字動(dòng)態(tài)滾動(dòng)效果。
2 數(shù)字動(dòng)態(tài)滾動(dòng)
2.1 計(jì)時(shí)器實(shí)現(xiàn)
先上效果:
以上效果是點(diǎn)擊按鈕加載金額,實(shí)際情況是頁(yè)面加載的時(shí)候就需要。這個(gè)時(shí)候我們需要在頁(yè)面加載的時(shí)候執(zhí)行用該方法。以上實(shí)例用到的代碼如下:
代碼:
<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="計(jì)時(shí)器"></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: "動(dòng)態(tài)變化金額", amount: 0, //初始amout amoutFrame: 0, amountShow: 0 }; }, computed: { // 計(jì)算屬性格式化頁(yè)面金額 amountFormatPage() { return amountFormat(this.amount); } }, methods: { changeAmount() { const total = 16000; //設(shè)置初始總金額 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>
除了這個(gè)效果以外,我們可以通過(guò)調(diào)節(jié)計(jì)時(shí)器的間隔時(shí)間來(lái)控制金額變化的速度;通過(guò)調(diào)節(jié)i
的大小來(lái)控制變化的次數(shù)。主要是控制這兩個(gè)參數(shù)來(lái)達(dá)到我們想要的效果。
2.2 動(dòng)畫(huà)幀實(shí)現(xiàn)
實(shí)現(xiàn)效果如下:
vue代碼如下:
<template> <div> <title-bar :title="title" @goBack="goback"></title-bar> <div> <label>您的余額為:</label> <label>{{ amountShow }}</label> </div> <t-button @clickhandle="changeAmountFrame" name="動(dòng)畫(huà)幀"></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: "動(dòng)態(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; // 動(dòng)畫(huà)繼續(xù) animation = window.requestAnimationFrame(f); } else { _this.amoutFrame = total; // 動(dòng)畫(huà)停止 window.cancelAnimationFrame(f); } _this.amountShow = amountFormat(_this.amoutFrame); }); }, goback() { // } } }; </script> <style lang="scss" scoped> .amount-box { label { display: box; } } </style>
window.requestAnimationFrame()
是執(zhí)行動(dòng)畫(huà)幀的關(guān)鍵方法,對(duì)應(yīng)window.cancelAnimationFrame()
是停止動(dòng)畫(huà)幀的方法。其中動(dòng)畫(huà)幀的價(jià)格時(shí)間一把為16ms,同上,通過(guò)調(diào)節(jié)framenum參數(shù)來(lái)控制一共播放多少幀,來(lái)達(dá)到我們想要的效果。
3 總結(jié)
本次用兩種方法實(shí)現(xiàn)金額數(shù)字等動(dòng)態(tài)變化,偏向應(yīng)用領(lǐng)域,若想了解即使器和動(dòng)畫(huà)幀的更深層次原理,請(qǐng)一部專業(yè)網(wǎng)站或者動(dòng)手艙室一下。
到此這篇關(guān)于vue數(shù)字金額動(dòng)態(tài)變化功能實(shí)現(xiàn)方法詳解的文章就介紹到這了,更多相關(guān)vue數(shù)字動(dòng)態(tài)變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue自定義組件如何通過(guò)v-model指令控制組件的隱藏、顯示
這篇文章主要介紹了vue自定義組件如何通過(guò)v-model指令控制組件的隱藏、顯示,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05vue中computed順序、watch順序、響應(yīng)次數(shù)使用
這篇文章主要介紹了vue中computed順序、watch順序、響應(yīng)次數(shù)使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格
這篇文章主要介紹了vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12Vue.js手風(fēng)琴菜單組件開(kāi)發(fā)實(shí)例
這篇文章主要為大家詳細(xì)介紹了Vue.js手風(fēng)琴菜單組件開(kāi)發(fā)實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05Vue?socket.io模塊實(shí)現(xiàn)聊天室流程詳解
vue-socket.io其實(shí)是在socket.io-client(在瀏覽器和服務(wù)器之間實(shí)現(xiàn)實(shí)時(shí)、雙向和基于事件的通信)基礎(chǔ)上做了一層封裝,將socket掛載到vue實(shí)例上,同時(shí)可使用sockets對(duì)象輕松實(shí)現(xiàn)組件化的事件監(jiān)聽(tīng),在vue項(xiàng)目中使用起來(lái)更方便2022-12-12Vue項(xiàng)目部署到IIS后刷新報(bào)錯(cuò)404的問(wèn)題及解決方法
這篇文章主要介紹了Vue項(xiàng)目部署到IIS后,刷新報(bào)錯(cuò)404,這里需要用到URL重寫(xiě)工具?--URL?Rewrite,需要的話需要自己下載安裝,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10利用Vue3+Element-plus實(shí)現(xiàn)大文件分片上傳組件
在開(kāi)發(fā)中如果上傳的文件過(guò)大,可以考慮分片上傳,分片就是說(shuō)將文件拆分來(lái)進(jìn)行上傳,將各個(gè)文件的切片傳遞給后臺(tái),然后后臺(tái)再進(jìn)行合并,下面這篇文章主要給大家介紹了關(guān)于利用Vue3+Element-plus實(shí)現(xiàn)大文件分片上傳組件的相關(guān)資料,需要的朋友可以參考下2023-01-01