vue實現(xiàn)數(shù)字翻頁動畫
更新時間：2022年08月30日 14:25:25 作者：Jack_13201
這篇文章主要為大家詳細介紹了vue實現(xiàn)數(shù)字翻頁動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)數(shù)字翻頁動畫的具體代碼，供大家參考，具體內(nèi)容如下
一、看效果
二、實現(xiàn)步驟
1、新建翻頁組件scrollNumber.vue
<template>
? ? <div class="count-flop" :key="compKey">
? ? ? ? <div :class="item != '.' && item != ',' ?'count-flop-box':'count-flop-point'" v-for="(item, index) in value" :key="index">
? ? ? ? ? ? <div v-if="item == ','" class="count-flop-content">,</div>
? ? ? ? ? ? <div v-else-if="item == '.'" class="count-flop-content">.</div>
? ? ? ? ? ? <div v-else class="count-flop-content" :class="['rolling_' + item]">
? ? ? ? ? ? ? ? <div v-for="(item2,index2) in numberList" :key="index2" class="count-flop-num">{{item2}}</div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div v-if="suffix" class="count-flop-unit">{{suffix}}</div>
? ? </div>
</template>
<script>
? ? export default {
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? value: [],
? ? ? ? ? ? ? ? numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
? ? ? ? ? ? ? ? compKey: 0
? ? ? ? ? ? };
? ? ? ? },
? ? ? ? props: ["val","suffix"],
? ? ? ? watch: {
? ? ? ? ? ? val() {
? ? ? ? ? ? ? ? this.value = this.val.toString().split("");
? ? ? ? ? ? ? ? this.compKey += 1;
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? created() {
? ? ? ? ? ? this.value = this.val.toString().split("");
? ? ? ? },
? ? };
</script>
<style scoped>
? ? .count-flop {
? ? ? ? display: inline-block;
? ? ? ? height: 50px;
? ? ? ? line-height: 50px;
? ? ? ? color: #fff;
? ? ? ? font-family: Gotham;
? ? ? ? font-size: 48px;
? ? ? ? color: #FFFFFF;
? ? ? ? text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
? ? }
? ? .count-flop > div {
? ? ? ? position: relative;
? ? ? ? display: inline-block;
? ? ? ? overflow: hidden;
? ? ? ? height: 100%;
? ? }
? ? .count-flop-box {
? ? ? ? margin-right: 6px;
? ? ? ? width: 34px;
? ? ? ? background-color: #20214d;
? ? ? ? height: 57px;
? ? ? ? line-height: 48px;
? ? ? ? border-radius: 4px;
? ? }
? ? .count-flop-point {
? ? ? ? margin-right: 5px;
? ? ? ? width: 10px;
? ? }
? ? .count-flop-content {
? ? ? ? text-align: center;
? ? ? ? position: absolute;
? ? ? ? left: 0;
? ? ? ? top: 0;
? ? ? ? width: 100%;
? ? ? ? animation-fill-mode: forwards !important;
? ? }
? ? .count-flop-unit {
? ? ? ? width: 68px;
? ? ? ? height: 50px;
? ? ? ? line-height: 50px;
? ? ? ? background-color: #20214d;
? ? ? ? border-radius: 4px;
? ? ? ? text-align: center;
? ? ? ? font-size: 16px;
? ? ? ? align-items: center;
? ? ? ? letter-spacing: 0.1em;
? ? ? ? color: #FFFFFF;
? ? }
? ? .rolling_0 {
? ? ? ? animation: rolling_0 2.1s ease;
? ? }
? ? @keyframes rolling_0 {
? ? ? ? from {
? ? ? ? ? ? transform: translateY(-90%);
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? transform: translateY(0);
? ? ? ? }
? ? }
? ? .rolling_1 {
? ? ? ? animation: rolling_1 3s ease;
? ? }
? ? @keyframes rolling_1 {
? ? ? ? from {
? ? ? ? ? ? transform: translateY(0);
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? transform: translateY(-10%);
? ? ? ? }
? ? }
? ? .rolling_2 {
? ? ? ? animation: rolling_2 2.1s ease;
? ? }
? ? @keyframes rolling_2 {
? ? ? ? from {
? ? ? ? ? ? transform: translateY(0);
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? transform: translateY(-20%);
? ? ? ? }
? ? }
? ? .rolling_3 {
? ? ? ? animation: rolling_3 3s ease;
? ? }
? ? @keyframes rolling_3 {
? ? ? ? from {
? ? ? ? ? ? transform: translateY(0);
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? transform: translateY(-30%);
? ? ? ? }
? ? }
? ? .rolling_4 {
? ? ? ? animation: rolling_4 2.1s ease;
? ? }
? ? @keyframes rolling_4 {
? ? ? ? from {
? ? ? ? ? ? transform: translateY(0);
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? transform: translateY(-40%);
? ? ? ? }
? ? }
? ? .rolling_5 {
? ? ? ? animation: rolling_5 3s ease;
? ? }
? ? @keyframes rolling_5 {
? ? ? ? from {
? ? ? ? ? ? transform: translateY(0);
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? transform: translateY(-50%);
? ? ? ? }
? ? }
? ? .rolling_6 {
? ? ? ? animation: rolling_6 2.1s ease;
? ? }
? ? @keyframes rolling_6 {
? ? ? ? from {
? ? ? ? ? ? transform: translateY(0);
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? transform: translateY(-60%);
? ? ? ? }
? ? }
? ? .rolling_7 {
? ? ? ? animation: rolling_7 3.1s ease;
? ? }
? ? @keyframes rolling_7 {
? ? ? ? from {
? ? ? ? ? ? transform: translateY(0);
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? transform: translateY(-70%);
? ? ? ? }
? ? }
? ? .rolling_8 {
? ? ? ? animation: rolling_8 2.1s ease;
? ? }
? ? @keyframes rolling_8 {
? ? ? ? from {
? ? ? ? ? ? transform: translateY(0);
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? transform: translateY(-80%);
? ? ? ? }
? ? }
? ? .rolling_9 {
? ? ? ? animation: rolling_9 3.6s ease;
? ? }
? ? @keyframes rolling_9 {
? ? ? ? from {
? ? ? ? ? ? transform: translateY(0);
? ? ? ? }
? ? ? ? to {
? ? ? ? ? ? transform: translateY(-90%);
? ? ? ? }
? ? }
</style>2、在頁面中引入組件
<template>
? ? <div class="select" style="font-size: 16px;">
? ? ? <ScrollNumber :val="formatNumber(val,2,1)"></ScrollNumber>
? ? </div>
</template>
<script>
import ScrollNumber from "./scrollNumber.vue";
export default {
? components: {
? ? ScrollNumber,
? },
? data() {
? ? return {
? ? ? val: 1632.1
? ? };
? },
? methods: {
? ? /**
? ? ?* formatNumber()
? ? ?* 將數(shù)值四舍五入后格式化.
? ? ?*
? ? ?* @param num 數(shù)值(Number或者String)
? ? ?* @param cent 要保留的小數(shù)位(Number)
? ? ?* @param isThousand 是否需要千分位 0:不需要, 1:需要(數(shù)值類型);
? ? ?* @return 格式的字符串,如'1,234,567.45'
? ? ?* @type String
? ? */
? ? formatNumber(num, cent, isThousand) {
? ? ? num = num.toString().replace(/\$|\,/g, "");
? ? ? if (isNaN(num)) num = "0";
? ? ? var sign = num == (num = Math.abs(num));
? ? ? num = parseFloat(num.toFixed(cent));
? ? ? num = num.toString();
? ? ? var cents;
? ? ? if (num.lastIndexOf(".") != -1) {
? ? ? ? let index = num.lastIndexOf(".");
? ? ? ? cents = num.substring(index + 1, num.length);
? ? ? } else {
? ? ? ? cents = "";
? ? ? }
? ? ? num = Math.floor(num * Math.pow(10, cent) + 0.50000000001);
? ? ? num = Math.floor(num / Math.pow(10, cent)).toString();
? ? ? if (isThousand) {
? ? ? ? for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
? ? ? ? ? num = num.substring(0, num.length - (4 * i + 3)) + "," + num.substring(num.length - (4 * i + 3));
? ? ? }
? ? ? if (cent > 0) {
? ? ? ? if (cents == "") {
? ? ? ? ? return (sign ? "" : "-") + num;
? ? ? ? } else {
? ? ? ? ? return (sign ? "" : "-") + num + "." + cents;
? ? ? ? }
? ? ? } else {
? ? ? ? return (sign ? "" : "-") + num;
? ? ? }
? ? },
? },
? mounted() {
? ? setInterval(() => {
? ? ? this.val += 1
? ? }, 3000)
? }
}
</script>
<style lang="less" scoped>
.select {
? ? border: 1px solid #ccc;
? ? border-radius: 5px;
? ? margin-top: 20px;
? ? height: 600px;
}
</style>3、注意
1）formatNumber函數(shù)說明
封裝一個數(shù)字函數(shù)，功能包含：千分位、保留小數(shù)、小數(shù)末尾抹零
2）用了一個定時函數(shù)，用來看翻頁效果，可以自行調(diào)接口渲染數(shù)據(jù)
4、不足多進言
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中后端做Excel導(dǎo)出功能返回數(shù)據(jù)流前端的處理操作
這篇文章主要介紹了vue中后端做Excel導(dǎo)出功能返回數(shù)據(jù)流前端的處理操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue3成功創(chuàng)建項目后?run?serve啟動項目報錯的解決
這篇文章主要介紹了vue3成功創(chuàng)建項目后?run?serve啟動項目報錯的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)右上角時間顯示實時刷新，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了VUE項目中調(diào)用高德地圖的全流程講解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue加載讀取本地txt/json等文件的實現(xiàn)方式
這篇文章主要介紹了Vue加載讀取本地txt/json等文件的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章介紹了使用vue-cli創(chuàng)建vue項目的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
關(guān)于ElementUI的el-upload組件二次封裝的問題
這篇文章主要介紹了關(guān)于ElementUI的el-upload組件二次封裝的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
今天小編就為大家分享一篇vue 獲取及修改store.js里的公共變量實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本篇文章主要介紹了VUE2實現(xiàn)事件驅(qū)動彈窗示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue刷新頁面后params參數(shù)丟失的原因和解決方法
這篇文章主要給大家介紹了vue刷新頁面后params參數(shù)丟失的原因和解決方法,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12