Swipe 轮播

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

基础用法

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

<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>4</van-swipe-item>
</van-swipe>
<style>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>

懒加载

当 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://img.yzcdn.cn/vant/apple-1.jpg',
      'https://img.yzcdn.cn/vant/apple-2.jpg',
    ];
  },
};

监听 change 事件

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

import { Toast } from 'vant';
  setup() {
    const onChange = (index) => Toast('当前 Swipe 索引：' + index);
    return { onChange };
  },
};

纵向滚动

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

<van-swipe style="height: 200px;" 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>

滑块默认宽度为 100%，可以通过 width 属性设置单个滑块的宽度。纵向滚动模式下，可以通过 height 属性设置单个滑块的高度。

<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>

自定义指示器

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

Swipe Props

Swipe Events

SwipeItem Events

Swipe 方法

通过 ref 可以获取到 Swipe 实例并调用实例方法，详见组件实例方法。

组件导出以下类型定义：

import type { SwipeProps, SwipeInstance, SwipeToOptions } from 'vant';

SwipeInstance 是组件实例的类型，用法如下：

import { ref } from 'vue';
import type { SwipeInstance } from 'vant';
const swipeRef = ref<SwipeInstance>();
swipeRef.value?.next();

SwipeToOptions 格式

Swipe Slots

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

滑动轮播时为什么触发了 click 事件？

这种情况通常是由于项目中引入了 fastclick 库导致的。fastclick 的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。

在桌面端无法操作组件？

参见。

Vant 中的 Swipe 组件是比较轻量的，因此功能也比较基础。如果需要更复杂的轮播效果，推荐使用社区里一些优质的轮播库，比如 vue-awesome-swiper。

组件从隐藏状态切换到显示状态时，无法正确渲染？

Swipe 组件在挂载时，会获取自身的宽度，并计算出轮播图的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法正确计算位置。

解决方法

方法一，如果是使用 v-show 来控制组件展示的，则替换为 v-if 即可解决此问题：

<!-- Before -->
<van-swipe v-show="show" />
<!-- After -->

方法二，调用组件的 resize 方法来主动触发重绘：