为了实现 Vue3 大屏数字滚动效果，我们可以使用 Vue3 的自定义指令和 CSS 动画。以下是一个简单的实现：
- 首先，我们需要创建一个自定义指令
scrollNumber，用于处理数字滚动的逻辑。在src/directives目录下创建一个名为scrollNumber.js的文件，并添加以下代码：
import { ref, onMounted, onUnmounted } from 'vue'; export default { beforeMount(el, binding) { const duration = binding.value || 500; // 滚动动画时长，默认为 500ms const start = parseInt(el.textContent); // 起始数字 const end = binding.arg; // 结束数字 const step = (end - start) / duration; // 每步滚动的距离 const timer = setInterval(() => { el.textContent = Math.floor(start + step); if (start === end) { clearInterval(timer); } else { start += step; } }, 16); onUnmounted(() => { clearInterval(timer); }); }, };
- 然后，在
src/main.js文件中引入刚刚创建的自定义指令，并将其注册为全局指令：
import { createApp } from 'vue'; import App from './App.vue'; import scrollNumber from './directives/scrollNumber'; const app = createApp(App); app.directive('scroll-number', scrollNumber); app.mount('#app');
- 接下来，在需要实现数字滚动效果的组件中，使用自定义指令
v-scroll-number，并传入起始数字和结束数字：
<template> <div class="container"> <h1 v-scroll-number="1" v-scroll-number:end="100"></h1> </div> </template>
- 最后，为数字滚动效果添加一些基本的样式：
.container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } h1 { font-size: 8rem; color: #fff; }
现在，当你运行项目时，你应该可以看到一个从 1 滚动到 100 的数字效果。你可以根据需要调整动画时长、起始数字和结束数字。
