vue3 滾動 選擇 原生

### 实现 Vue3 中的滚动选择功能 在 Vue3 中实现滚动选择器的功能可以借助于原生 JavaScript 来处理 DOM 操作以及事件监听。下面是一个基于 `ref` 和自定义方法来创建一个简单的滚动选择组件的例子。 #### 创建滚动选择器组件 首先，在模板部分构建基本结构： ```html <template> <div class="picker-container"> <ul ref="scrollList" class="picker-list"> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> </div> </template> <script setup> import { onMounted, ref } from 'vue'; const scrollList = ref(null); let intervalId; const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4']; onMounted(() => { startScrolling(); }); function startScrolling() { const ulElement = scrollList.value; function moveUp() { let firstChild = ulElement.firstElementChild.cloneNode(true); ulElement.appendChild(firstChild); ulElement.style.transition = "none"; ulElement.style.transform = "translateY(-40px)"; setTimeout(() => { ulElement.style.transition = ""; ulElement.style.transform = "translateY(0)"; ulElement.removeChild(ulElement.firstElementChild); }, 16); // Match with CSS transition duration (if any) } intervalId = setInterval(moveUp, 2000); ulElement.addEventListener('mouseenter', () => clearInterval(intervalId)); ulElement.addEventListener('mouseleave', () => startScrolling()); } </script> <style scoped> .picker-container { width: 100%; height: 80px; /* Set a fixed height */ overflow: hidden; } .picker-list { list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: transform .1s ease-in-out; } .picker-list li { font-size: 1em; line-height: 40px; text-align: center; } </style> ``` 此代码片段展示了如何利用 Vue 的组合 API (`setup`) 函数初始化并操作 DOM 元素，通过 `ref` 获取实际渲染后的 HTML 节点，并对其进行动画效果控制[^2]。 在这个例子中，每当触发定时器时，会复制列表项的第一个子节点并将它移动到最后面的位置，从而形成一种视觉上的向上滚动的效果。同时设置了鼠标悬停暂停滚动和离开恢复滚动的行为。