超简单，几行js代码就实现一个 vue3 的数字滚动效果！

预览效果

1. 创建一个template

<template><div class="num-warp"><template v-for="item in numStr"><div v-if="item === ','" class="dot">,</div><divv-elseclass="num-box":style="{transform: ` translateY(${-sh * Number(item)}px)`,}"><span v-for="i in 10"> {{ i - 1 }} </span></div></template></div>
</template>

2 实现js逻辑部分

<script setup lang="ts">
// 这个没有做成组件，做成组件的话，自己稍微改改
import { computed, onMounted, ref } from "vue";// 基础数据源，或者外部传入
const num = ref(15481245784544);
// 这个是滚动的高度，也就是一个span元素的默认高度，设置的文字大小不同，这个元素的高度也不同，你可以动态计算，我是直接控制台鼠标点击查看的元素大小，比较省事
const sh = ref(60);// 转化成千分位
const numStr = computed(() => {return num.value.toLocaleString();
});// 这是个测试代码
onMounted(() => {setInterval(() => {num.value = Math.floor(Math.random() * 100000000000000);}, 2000);
});
</script>

实现样式

<style scoped>
.dot {font-size: 40px;
}
.num-warp {display: flex;height: 60px;overflow-y: hidden;line-height: 60px;
}
.num-box {display: flex;flex-direction: column;font-size: 40px;margin: 0 1px;transition: all 1s;
}
</style>