Vue で数字をスクロールする効果を実現する

まずは達成された効果を見てみましょう

 

コードを直接アップロードし、コンポーネントの形式でカプセル化します。

<template>
    <div class="numItem">
        <div :style="style" v-if="num!='.'">
            <span v-for="(item,index) in nums" :key="index">{
   
   { item-1 }}</span>
        </div>
        <div v-else>
            <span>{
   
   { num }}</span>
        </div>
    </div>
    </template>
    
    <script>
    export default {
        name: 'numItem',
        props: {
            num: {
                type: Number | String,
                default: 0
            },
            delay: {
                type: Number,
                default: 0
            }
        },
        components: {},
        data() {
            return {
                style: {}
            };
        },
        computed: {
            nums() {
                return parseInt(this.num) + 1
            }
        },
        watch: {
            num: {
                immediate: true, // 立即执行
                handler(newVal, oldVal) {
                    this.style = {
                        "transform": "translateY(0)",
                    }
                    setTimeout(() => {
                        console.log(this.num);
                        this.style = {
                            "transform": "translateY(" + -33 * this.num + "px)",
                        }
                    }, 1000);
                }
            }
        },
        methods: {
    
        },
        created() {},
        mounted() {
    
        },
        destroyed() {},
    }
    </script>
    
    <style lang="scss" scoped>
    @import '../style/util.scss';
    .numItem {
        width: vw(28);
        height: vw(33);
        background-image: linear-gradient(180deg, rgba(143, 215, 252, 0.00) 0%, rgba(86, 174, 248, 0.11) 100%);
        box-shadow: inset 0px -10px 8px 5px rgba(86, 174, 248, 0.35);
        border: 1PX solid #407f97;
        border-radius: vw(3);
        overflow: hidden;
        &>div {
            width:  vw(28);
            height: auto;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: all 2s linear;
            transform: translateY(0);
        }
    
        span {
            width:  vw(28);
            height: vw(33);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'dig';
            font-size: vw(28);;
            color: pink;
            flex-shrink: 0;
        }
    
    }
    </style>