大屏数字滚动

大屏数字滚动

本来不是很想封装的，但是想想感觉很复杂，大屏又经常用，所以直接提供一份vue2版本的代码 供大家使用

为什么不用ts？工作有很多老旧项目，没有引入ts，为避免无法使用，提供无ts的版本

源码

<template>
    <div class="number-flip">
        <div class="number-flip-item" :class="[itemClass]" v-for="(item, i) in offsets" :key="i">
            <span class="number-flip-item-all" :style="{ top: `${item}%`, transition: `all ${transitionTime}ms` }">
                <i :style="{ top: `${100 * (j - 1)}%` }" v-for="j in 10" :key="j">{{ j - 1 }}</i>
            </span>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        // 长度，默认六位数
        len: {
            type: Number,
            default: 6,
        },
        // 当前的数值，直接变化即可
        num: {
            type: Number,
            default: 0
        },
        // 每一个的class，自定义class 字符串
        itemClass: {
            type: String
        },
        // 动画时长，毫秒
        transitionTime: {
            type: Number,
            default: 800,
        }
    },
    computed: {
        offsets() {
            const num = this.num
            const len = this.len
            return Array(len).fill(0).map((v, i) => {
                const cur = Math.floor(num / (10 ** i) % 10)
                return -cur * 100
            }).reverse()
        }
    },
};
</script>
<style>
.number-flip {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.number-flip-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    width: 30px;
    height: 60px;
    border: 1px solid #000;
}

.number-flip-item-all {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1000%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.number-flip-item-all>i {
    width: 100%;
    height: 10%;
    font-style: normal;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>

技术讨论

1. 布局方面，直接使用了1000%的高度，进行拓展
2. 尽量使用数据驱动思想，避免主动触发方法的问题