vue中的數字滾動和翻牌器

更新時間：2023年10月21日 09:59:07 作者：小矮馬

這篇文章主要介紹了vue中的數字滾動和翻牌器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

1、數字滾動vue-count-to

（1）安裝：

npm install vue-count-to

（2）使用：

<template>
    <div>
        <h2>數字滾動動畫：</h2>
        <CountTo :start-val="startVal" :end-val="endVal" :duration="2500" class="count-number"></CountTo>
    </div>
</template>

 
<script>
    import CountTo from 'vue-count-to'
    export default {
        components: {
            CountTo
        },
        data() {
            return {
                startVal: 0,
                endVal: 2017
            }
        }
</script>

（3）說明：

參考鏈接：http://panjiachen.github.io/countTo/demo/

2、翻牌器組件

（1）組件：

<template>
    <div class="count-flop" :key="compKey">
        <div :class="item!='.'?'count-flop-box':'count-flop-point'" v-for="(item, index) in value" :key="index">
            <div v-if="item!='.'" class="count-flop-content" :class="['rolling_' + item]">
                <div v-for="(item2,index2) in numberList" :key="index2" class="count-flop-num">{{item2}}</div>
            </div>
            <div v-else class="count-flop-content">.</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;
        font-size: 0;
        /* 可更改 */
        height: 50px;
        line-height: 50px;
        font-size: 36px;
        color: #4898f1;
    }
 
    .count-flop > div {
        position: relative;
        display: inline-block;
        overflow: hidden;
        height: 100%;
    }
 
    .count-flop-box {
        /* 可更改 */
        margin-right: 5px;
        width: 36px;
        border: 1px solid rgba(72, 152, 241, 0.3);
        line-height: 48px;
        border-radius: 6px;
    }
 
    .count-flop-point {
        /* 可更改 */
        margin-right: 5px;
        width: 10px;
    }
 
    .count-flop-content {
        font-family: MicrosoftYaHei-Bold;
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        animation-fill-mode: forwards !important;
    }
 
    .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>
        <h2>翻牌器動畫：</h2>
        <CountFlop :val="val" />
 
        <h2>翻牌器自定義樣式：</h2>
        <div class="myself">
            <CountFlop :val="val2" suffix="rmb" />
        </div> 
    </div> 
</template>

 
<script>
    import CountFlop from '@/components/CountFlop.vue'
    export default {
        components: {
            CountFlop,
        },
        data() {
            return {
                val: 2017,
                val2: 16.6,
            }
        }
    }
</script>

 
<style scoped lang="less">
    .myself {
        height: 32px;
        /deep/ .count-flop {
            height: 32px;
            line-height: 32px;
            font-size: 36px;
            color: red;
        }
        /deep/ .count-flop-box {
            margin-right: 0;
            width: 22px;
            border: 0;
            border-radius: 0;
            line-height: 32px;
        }
        /deep/ .count-flop-point {
            margin-right: 0;
        }
        /deep/ .count-flop-unit {
            font-size: 25px;
        }
    }
</style>

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue中的event bus非父子組件通信解析
本篇文章主要介紹了 vue中的event bus非父子組件通信解析，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
vue-router權限控制(簡單方式)
這篇文章主要介紹了vue-router權限控制(簡單方式)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
vue項目本地開發(fā)完成后部署到服務器后報404錯誤解決方案
很多時候我們發(fā)現辛辛苦苦寫的VueJs應用經過打包后在自己本地搭建的服務器上測試沒有什么問題,但真正放在服務器上后會發(fā)現或多或少的問題,這篇文章主要給大家介紹了關于vue項目本地開發(fā)完成后部署到服務器后報404錯誤的解決方案,需要的朋友可以參考下
2024-01-01
Vue?Router如何刷新當前頁面
Vue項目,?在實際工作中,?有些時候需要在?加載完某些數據之后對當前頁面進行刷新,?這篇文章主要為大家介紹了三種常用方法,需要的可以參考一下
2023-10-10
vue?parseHTML源碼解析hars?end?comment鉤子函數
這篇文章主要為大家介紹了vue?parseHTML源碼解析hars?end?comment鉤子函數示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
DeepSeek?助力?Vue?開發(fā)絲滑的表單驗證Form?Validation功能
文章介紹了如何使用Vue3的組合式API創(chuàng)建一個表單驗證組件,并提供了詳細的代碼示例,組件支持雙向綁定、自定義驗證規(guī)則、樣式和布局等功能,還涵蓋了組件的調用示例、路由配置和頁面展示入口
2025-02-02
Vue3實現可視化拖拽標簽小程序功能
這篇文章主要介紹了Vue3實現可視化拖拽標簽小程序,實現功能可視化標簽拖拽，雙擊標簽可修改標簽內容，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2023-09-09
vue 如何處理防止按鈕重復點擊問題
這篇文章主要介紹了vue 如何處理防止按鈕重復點擊問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue報錯"vue-cli-service‘不是內部或外部命令,也不是...”的解決辦法
這篇文章主要介紹了vue報錯"vue-cli-service‘不是內部或外部命令，也不是...”的解決辦法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-01-01
vue element-ui v-for循環(huán)el-upload上傳圖片動態(tài)添加、刪除方式
這篇文章主要介紹了vue element-ui v-for循環(huán)el-upload上傳圖片動態(tài)添加、刪除方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10