在Vue中创建一个数字滚动效果的组件可以通过以下步骤实现：
- 创建一个新的Vue组件，可以命名为
NumberScroll.vue。 - 在组件的模板部分，使用
v-for指令创建一个数字列表，并添加一个ref属性来引用列表的容器元素。
html复制代码<template> <div class="number-scroll"> <div class="number-wrapper" ref="wrapper" @scroll="handleScroll"> <div v-for="n in numbers" :key="n" class="number">{{ n }}</div> </div> </div> </template>- 在组件的
setup()函数中，使用ref()和reactive()函数创建一个响应式数据numbers和一个滚动位置的响应式数据scrollPos。同时，使用watchEffect()函数监听scrollPos的变化并执行滚动动画。
js复制代码<script> import { ref, reactive, onMounted, onUpdated } from 'vue'; export default { setup() { const wrapper = ref(null); const numbers = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9]); const scrollPos = reactive(0); const handleScroll = () => { scrollPos.value = wrapper.value.scrollTop; }; const startScrolling = () => { wrapper.value.animate([ { scrollTop: scrollPos.value }, { scrollTop: 0 } ], { duration: 1000, easing: 'ease-in-out' }); }; onMounted(() => { startScrolling(); }); onUpdated(() => { startScrolling(); }); return { wrapper, numbers, scrollPos, handleScroll }; } }; </script>- 在组件的样式部分，设置容器元素的样式，使其可以滚动。同时，设置数字列表中每个数字的样式，使其垂直居中显示。
css复制代码<style scoped> .number-scroll { height: 400px; overflow: hidden; } .number-wrapper { height: 100%; overflow-y: scroll; transition: scrollTop 0.5s linear; } .number { height: 400px; line-height: 400px; text-align: center; } </style>