AI教程网 - 未来以来,拥抱AI;新手入门,从AI教程网开始......

Vant Swipe 轮播

VANT教程 AI君 57℃

引入

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 即可避免该问题。

在桌面端无法操作组件?

参见在桌面端使用

转载请注明:www.ainoob.cn » Vant Swipe 轮播

喜欢 (0)or分享 (0)