Swipe 轮播

引入

  1. import{Swipe,SwipeItem}from'vant';
  2. Vue.use(Swipe).use(SwipeItem);

代码演示

基础用法

通过autoplay属性设置自动轮播间隔

  1. <van-swipe :autoplay="3000"indicator-color="white">
  2. <van-swipe-item>1</van-swipe-item>
  3. <van-swipe-item>2</van-swipe-item>
  4. <van-swipe-item>3</van-swipe-item>
  5. <van-swipe-item>4</van-swipe-item>
  6. </van-swipe>

图片懒加载

配合 Lazyload 组件实现图片懒加载

  1. <van-swipe :autoplay="3000">
  2. <van-swipe-itemv-for="(image, index) in images" :key="index">
  3. <imgv-lazy="image"/>
  4. </van-swipe-item>
  5. </van-swipe>
  1. exportdefault{
  2. data(){
  3. return{
  4. images:[
  5. 'https://img.yzcdn.cn/1.jpg',
  6. 'https://img.yzcdn.cn/2.jpg'
  7. ]
  8. }
  9. }
  10. }

监听 change 事件

  1. <van-swipe @change="onChange">
  2. <van-swipe-item>1</van-swipe-item>
  3. <van-swipe-item>2</van-swipe-item>
  4. <van-swipe-item>3</van-swipe-item>
  5. <van-swipe-item>4</van-swipe-item>
  6. </van-swipe>
  1. exportdefault{
  2. methods:{
  3. onChange(index){
  4. Toast('当前 Swipe 索引:'+ index);
  5. }
  6. }
  7. }

纵向滚动

  1. <van-swipe :autoplay="3000"vertical>
  2. <van-swipe-item>1</van-swipe-item>
  3. <van-swipe-item>2</van-swipe-item>
  4. <van-swipe-item>3</van-swipe-item>
  5. <van-swipe-item>4</van-swipe-item>
  6. </van-swipe>

控制滑块大小

  1. <van-swipe :autoplay="3000" :width="300">
  2. <van-swipe-item>1</van-swipe-item>
  3. <van-swipe-item>2</van-swipe-item>
  4. <van-swipe-item>3</van-swipe-item>
  5. <van-swipe-item>4</van-swipe-item>
  6. </van-swipe>

自定义指示器

  1. <van-swipe @change="onChange">
  2. <van-swipe-item>1</van-swipe-item>
  3. <van-swipe-item>2</van-swipe-item>
  4. <van-swipe-item>3</van-swipe-item>
  5. <van-swipe-item>4</van-swipe-item>
  6. <divclass="custom-indicator"slot="indicator">
  7. {{ current + 1 }}/4
  8. </div>
  9. </van-swipe>
  1. exportdefault{
  2. data(){
  3. return{
  4. current:0
  5. }
  6. },
  7. methods:{
  8. onChange(index){
  9. this.current = index;
  10. }
  11. }
  12. }

API

Swipe Props

参数说明类型默认值版本
autoplay自动轮播间隔,单位为 msNumber--
duration动画时长,单位为 msNumber500-
initial-swipe初始位置索引值Number0-
loop是否开启循环播放Booleantrue-
show-indicators是否显示指示器Booleantrue-
indicator-color指示器颜色String#1989fa1.4.5
vertical是否为纵向滚动Booleanfalse1.1.1
touchable是否可以通过手势滑动Booleantrue1.1.1
width滑块宽度Number01.2.1
height滑块高度Number01.2.1

Swipe Events

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

SwipeItem Events

事件名说明回调参数
click点击时触发-

Swipe 方法

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

方法名参数返回值介绍
swipeToindex: 目标位置的索引void滚动到目标位置

Swipe Slots

名称说明
default轮播内容
indicator自定义指示器

Swipe 轮播 - 图1