van-swipe
时间: 2025-06-13 20:40:18 浏览: 11
### 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` 属性实现异步关闭功能。
---
###
阅读全文
相关推荐



















