van-swipe

### van-swipe 使用方法与代码示例 `van-swipe` 是 Vant 组件库中的一个轮播组件，适用于 Vue 项目中实现图片或内容的轮播展示。以下将详细介绍其使用方法和相关代码示例。 #### 基本使用方法 `van-swipe` 的基本属性包括 `loop`、`autoplay`、`width` 等，用于控制轮播行为。以下是简单的代码示例[^1]： ```vue <template> <van-swipe :loop="false" :width="300"> <van-swipe-item>1</van-swipe-item> <van-swipe-item>2</van-swipe-item> <van-swipe-item>3</van-swipe-item> <van-swipe-item>4</van-swipe-item> </van-swipe> </template> <script> export default { name: "SwipeExample", }; </script> ``` 在上述代码中，`loop` 属性设置为 `false` 表示不循环播放，`width` 设置为 `300` 表示每个轮播项的宽度为 300px。 #### 动态数据绑定 如果需要动态绑定数据到轮播项中，可以结合 `v-for` 指令实现。同时可以通过监听 `change` 事件获取当前活动的轮播索引[^2]： ```vue <template> <van-swipe @change="onChange" ref="swiper"> <van-swipe-item v-for="(item, index) in List" :key="index"> {{ item }} </van-swipe-item> </van-swipe> </template> <script> export default { data() { return { List: ["图片1", "图片2", "图片3", "图片4"], changenav: 0, }; }, methods: { onChange(ind) { this.changenav = ind; }, gotoswiper(index) { this.$refs.swiper.swipeTo(index); }, }, }; </script> ``` 在此代码中，`@change="onChange"` 用于监听轮播切换事件，并通过 `this.$refs.swiper.swipeTo(index)` 实现手动跳转到指定轮播项。 #### 自定义样式与交互 如果需要对轮播项进行更复杂的自定义样式或交互操作，可以结合 CSS 和事件处理函数实现。例如，添加删除按钮的场景可以参考以下代码[^3]： ```vue <template> <view> <van-swipe-cell right-width="65" async-close @close="onClose" > <van-cell-group> <van-cell title="单元格" value="内容" label="描述" border="false" /> </van-cell-group> <view slot="right" class="delete">删除</view> </van-swipe-cell> </view> </template> <style> .van-cell { touch-action: none; } .delete { height: 100%; text-align: center; width: 65px; line-height: 45px; color: #fff; background-color: #ec132d; } </style> <script> export default { methods: { onClose(event) { const { position, instance } = event.detail; switch (position) { case "left": case "cell": instance.close(); break; case "right": wx.showModal({ content: "确定要删除吗？", success(sm) { if (sm.confirm) { instance.close(); } else if (sm.cancel) { console.log("用户点击取消"); } }, }); break; } }, }, }; </script> ``` 上述代码展示了如何在轮播项中嵌入删除按钮，并通过 `async-close` 属性实现异步关闭功能。 --- ###