![【vue自定义组件】实现大屏数字滚动翻转效果插图 头像](https://nlp-eb.cdn.bcebos.com/logo/icon-robin.png)
要实现大屏数字滚动翻转效果,需要创建一个 Vue3 组件并使用 Composition API 中的 ref 和 reactive 来创建响应式数据,然后通过 CSS 来控制数字滚动的动画效果。组件的样式要设置为绝对定位,并使用 CSS3 的 transform 属性实现翻转效果。下面是一个简单的实现:
- 创建一个 Vue3 组件:
php复制代码<template> <div class="number-wrapper" ref="wrapper" @scroll="handleScroll"> <transition-group name="number" tag="div" class="number-group"> <div v-for="n in numbers" :key="n" class="number">{{ n }}</div> </transition-group> </div> </template> <script> import { ref, reactive } 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); let isFlipping = false; const handleScroll = () => { if (isFlipping) { return; } const scrollHeight = wrapper.value.scrollHeight; const scrollTop = wrapper.value.scrollTop; if (scrollTop === 0) { wrapper.value.scrollTop = scrollHeight; } else if (scrollTop === scrollHeight) { wrapper.value.scrollTop = 0; } else { isFlipping = true; setTimeout(() => { isFlipping = false; }, 500); } }; const reverseNumbers = () => { numbers.reverse(); }; return { wrapper, numbers, scrollPos, handleScroll, reverseNumbers, }; }, }; </script>