vue3自定义短语垂直轮播组件

### Vue3 自定义垂直轮播组件实现 在 Vue3 的环境中，基于 `Composition API` 和 `Setup` 语法糖，可以轻松实现一个自定义的垂直轮播组件。以下是完整的实现思路和代码示例。 --- #### 1. 组件结构设计 - **核心功能**：支持上下滚动、自动播放、手动控制。 - **扩展功能**：分页指示器、动态更新内容、性能优化（如 CSS 硬件加速）。 --- #### 2. 实现步骤 ##### （1）HTML 模板部分 使用 `<transition-group>` 来管理动画效果，并通过类名控制样式变化。 ```vue <template> <div class="vertical-slider"> <!-- 上翻按钮 --> <button @click="prev()" class="slider-btn up">↑</button> <!-- 轮播内容 --> <transition-group tag="ul" name="slide-vertical" class="slider-content"> <li v-for="(item, index) in visibleSlides" :key="index" class="slider-item"> {{ item }} </li> </transition-group> <!-- 下翻按钮 --> <button @click="next()" class="slider-btn down">↓</button> </div> </template> ``` --- ##### （2）CSS 样式部分 定义基础布局和过渡动画效果。 ```css <style scoped> .vertical-slider { position: relative; width: 300px; height: 400px; overflow: hidden; } .slider-content { list-style-type: none; padding: 0; margin: 0; } .slider-item { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; background-color: #f0f0f0; border-bottom: 1px solid #ccc; } /* 过渡动画 */ .slide-vertical-enter-active, .slide-vertical-leave-active { transition: all 0.5s ease-in-out; } .slide-vertical-enter-from, .slide-vertical-leave-to { transform: translateY(-100%); } .slide-vertical-leave-active { position: absolute; width: 100%; } /* 按钮样式 */ .slider-btn { position: absolute; z-index: 999; background-color: rgba(0, 0, 0, 0.5); color: white; border: none; cursor: pointer; font-size: 1.5rem; padding: 0.5rem 1rem; } .up { top: 10px; left: 50%; transform: translateX(-50%); } .down { bottom: 10px; left: 50%; transform: translateX(-50%); } </style> ``` --- ##### （3）JavaScript 部分 利用 Composition API 编写逻辑。 ```javascript <script setup> import { ref, computed, onMounted } from 'vue'; // 数据源 const slides = ref([ '短语一', '短语二', '短语三', '短语四', '短语五' ]); // 当前索引 const currentIndex = ref(0); // 可见的内容计算属性 const visibleSlides = computed(() => { return [slides.value[currentIndex.value]]; }); // 切换到下一个 const next = () => { if (currentIndex.value >= slides.value.length - 1) { currentIndex.value = 0; // 循环回滚 } else { currentIndex.value++; } }; // 切换到上一个 const prev = () => { if (currentIndex.value === 0) { currentIndex.value = slides.value.length - 1; // 循环回滚 } else { currentIndex.value--; } }; // 自动播放功能 let autoplayInterval; onMounted(() => { startAutoplay(); }); const startAutoplay = () => { clearInterval(autoplayInterval); autoplayInterval = setInterval(next, 3000); // 每隔3秒切换一次 }; </script> ``` --- #### 3. 关键点解析 - **循环回滚机制** 在 `next()` 和 `prev()` 函数中实现了无缝循环的效果[^1]。 - **可见内容计算** 使用 `computed` 计算当前展示的滑块内容，确保只渲染单个元素[^2]。 - **过渡动画** 借助 `transition-group` 和 CSS 动画实现平滑的垂直移动效果[^3]。 - **自动播放与暂停** 在组件挂载时启动定时器，在用户交互时停止自动播放[^4]。 --- #### 4. 性能优化建议 - **硬件加速**：为 `.slider-item` 添加 `will-change: transform;` 属性以启用 GPU 渲染。 - **懒加载**：如果数据量较大，考虑按需加载内容以减少内存占用。 - **事件节流**：防止快速点击按钮触发过多的 DOM 更新操作。 --- #### 5. 扩展功能 - **分页指示器**：显示当前选中的索引位置。 - **动态更新**：允许外部传入新的数据集合并实时刷新。 - **触控手势**：增加移动端友好的拖拽滑动体验。 --- ###