uniapp的swiper实现堆叠式轮播

### 如何在 UniApp 中使用 Swiper 组件实现堆叠式轮播效果 #### 实现思路 通过 `swiper` 和其子组件 `swiper-item` 的组合，配合 CSS 样式调整每张卡片的位置、大小以及透明度，从而达到堆叠式的视觉效果。同时利用 `@touchmove` 或者内置的轮播功能来实现左右滑动切换的功能。 以下是基于 UniApp 平台的一个完整示例代码： ```html <template> <view class="container"> <!-- Swiper 容器 --> <swiper class="swiper-container" :circular="true" :autoplay="false" @change="onSwiperChange" duration="300"> <swiper-item v-for="(item, index) in items" :key="index"> <view :class="'card ' + (currentIndex === index ? 'active' : '')" :style="{ zIndex: items.length - index }"> <image :src="item.image" mode="aspectFill"></image> <view class="overlay-text">{{ item.text }}</view> </view> </swiper-item> </swiper> <!-- 左右按钮控制 --> <button class="control-btn prev" @click="prevSlide">←</button> <button class="control-btn next" @click="nextSlide">→</button> </view> </template> <script> export default { data() { return { currentIndex: 0, items: [ { image: 'https://example.com/image1.jpg', text: 'Card 1' }, { image: 'https://example.com/image2.jpg', text: 'Card 2' }, { image: 'https://example.com/image3.jpg', text: 'Card 3' } ] }; }, methods: { onSwiperChange(e) { this.currentIndex = e.detail.current; }, prevSlide() { const length = this.items.length; this.currentIndex = (this.currentIndex - 1 + length) % length; this.$refs.swiperRef && this.$refs.swiperRef.changeItem(this.currentIndex); }, nextSlide() { const length = this.items.length; this.currentIndex = (this.currentIndex + 1) % length; this.$refs.swiperRef && this.$refs.swiperRef.changeItem(this.currentIndex); } } }; </script> <style scoped> .container { position: relative; } .swiper-container { width: 80%; height: 400px; margin: auto; overflow: visible; /* 显示超出部分 */ } .card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: all 0.3s ease-in-out; } /* 非活动状态下的卡片样式 */ .card:not(.active) { scale: 0.8; opacity: 0.7; } .active { z-index: 10 !important; scale: 1; opacity: 1; } .overlay-text { position: absolute; bottom: 10px; left: 10px; color: white; font-size: 16px; background-color: rgba(0, 0, 0, 0.5); padding: 5px 10px; border-radius: 5px; } .control-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); color: white; border: none; cursor: pointer; padding: 10px; border-radius: 50%; } .prev { left: 10px; } .next { right: 10px; } </style> ``` --- #### 关键点解析 1. **动态设置 `zIndex`** 每个 `swiper-item` 对应的卡片会根据数组索引来动态计算 `zIndex` 属性值，越靠后的卡片拥有更高的层级[^1]。 2. **CSS 动画与缩放** 利用 `scale` 和 `opacity` 来模拟堆叠效果中的层次感。当前激活的卡片 (`active`) 尺寸保持正常并完全不透明；其他未激活的卡片则适当缩小尺寸和降低透明度[^2]。 3. **事件监听** 当前显示的卡片索引由 `@change` 方法捕获更新至数据模型中，并同步影响视图上的高亮逻辑[^3]。 4. **跨平台兼容性** 上述方案充分考虑了 H5、微信小程序、Android/iOS 应用等多种环境的一致表现需求[^4]。 --- #### 注意事项 - 图片资源路径需确保有效加载。 - 如果需要更复杂的交互体验（如点击跳转链接），可在模板绑定额外方法处理。 - 可进一步优化性能，比如懒加载远程图片减少初始渲染压力。