JSRUN 用代码说话

Swipe 轮播

编辑教程

Swipe 轮播

引入

import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);

代码演示

基础用法

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

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

图片懒加载

当 Swipe 中含有图片时,可以配合 Lazyload 组件实现图片懒加载

<van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" />
  </van-swipe-item>
</van-swipe>


import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

export default {
  data() {
    return {
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ]
    }
  }
}

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


import { Toast } from 'vant';

export default {
  methods: {
    onChange(index) {
      Toast('当前 Swipe 索引:' + index);
    }
  }
}

纵向滚动

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

目前不支持在循环滚动模式下自定义滑块大小,因此需要将 loop 设置为 false

自定义指示器

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

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

  <div class="custom-indicator" slot="indicator">
    {{ current + 1 }}/4
  </div>
</van-swipe>


export default {
  data() {
    return {
      current: 0
    }
  },
  methods: {
    onChange(index) {
      this.current = index;
    }
  }
}

API

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 v2.2.13 是否阻止滑动事件冒泡 boolean true
indicator-color 指示器颜色 string #1989fa

Swipe Events

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

SwipeItem Events

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

Swipe 方法

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

方法名 说明 参数 返回值
prev v2.4.2 切换到上一轮播 - -
next v2.4.2 切换到下一轮播 - -
swipeTo 切换到指定位置 index: number,
options: Options
void
resize v2.2.14 外层元素大小变化后,
可以调用此方法来触发重绘
- void

swipeTo Options 格式

名称 说明 类型
immediate 是否跳过动画 boolean

Swipe Slots

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

常见问题

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

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

将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。

实例

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟