轮播图

Swipe Props：

参数	说明	类型	默认值
autoplay	自动轮播间隔，单位为 ms	number/string	-
duration	动画时长，单位为 ms	number/string	500
initial-swipe	初始位置索引值	number/string	0
width	滑块宽度，单位为 px	number/string	auto
height	滑块高度，单位为 px	number/string	auto
loop	是否开启循环播放	boolean	true
show-indicators	是否显示指示器	boolean	true
vertical	是否为纵向滚动	boolean	false
touchable	是否可以通过手势滑动	boolean	true
stop-propagation	是否阻止滑动事件冒泡	boolean	true
lazy-render	是否延迟渲染未展示的轮播	boolean	false
indicator-color	指示器颜色	string	#1989fa

Swipe Events

事件名	说明	回调参数
change	每一页轮播结束后触发	index 当前页的索引

SwipeItem Events

事件名	说明	回调参数
click	点击时触发	event: MouseEvent

Swipe 方法 通过 ref 可以获取到 Swipe 实例并调用实例方法.

事件名	说明	参数
prev	切换到上一轮播	-
next	切换到下一轮播	-
swipeTo	切换到指定位置	index: number, options: SwipeToOptions
resize	外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘	-

基础用法

• 每个 SwipeItem 代表一张轮播卡片，可以通过 autoplay 属性设置自动轮播的间隔。

<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <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>

轮播图片懒加载

• 当 Swipe 中含有图片时，可以通过 lazy-render 属性来开启懒加载模式。在懒加载模式下，只会渲染当前页和下一页。

<van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>

export default {
  setup() {
    const images = [
      "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
      "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
    ];
    return { images };
  },
};

监听 change 事件

• 在每一页轮播结束后，会触发 change 事件。

<van-swipe @change="onChange">
      <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>

export default { setup() { const onChange = (index) => console.log('当前 Swipe
索引：' + index); return { onChange }; }, };

纵向滚动

• 设置 vertical 属性后滑块会纵向排列，此时需要指定滑块容器的高度。

<van-swipe vertical>
      <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>

自定义指示器

• 通过 indicator 插槽可以自定义指示器的样式。

<van-swipe>
  <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>
  <template #indicator="{ active, total }">
    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
  </template>
</van-swipe>
<style>
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>

vant 文档

https://vant-contrib.gitee.io/vant/v3/#/zh-CN/swipe#swipe-fang-fa