Swiper 轮播

介绍

用于循环播放一组图片或内容。

基础用法

每个 SwiperItem 组件代表一张轮播卡片，通过 height 属性设置轮播高度。

<vd-swiper :height="200" :vertical="state.vertical" @touchmove.stop.prevent>
  <vd-swiper-item>
    <image src="图片1" mode="aspectFill" style="width:100%;height:100%;" />
  </vd-swiper-item>
  <vd-swiper-item>
    <image src="图片2" mode="aspectFill" style="width:100%;height:100%;" />
  </vd-swiper-item>
  <vd-swiper-item>
    <image src="图片3" mode="aspectFill" style="width:100%;height:100%;" />
  </vd-swiper-item>
</vd-swiper>

纵向滚动

通过 vertical 属性设置纵向滚动。

<vd-swiper :height="200" vertical @touchmove.stop.prevent>
  <vd-swiper-item>1</vd-swiper-item>
  <vd-swiper-item>2</vd-swiper-item>
  <vd-swiper-item>3</vd-swiper-item>
</vd-swiper>

指示器样式

通过 indicator-type 属性设置指示器样式，可选值为 dots dots-bar page。

<vd-swiper :height="200" indicator-type="page" @touchmove.stop.prevent>
  <vd-swiper-item>1</vd-swiper-item>
  <vd-swiper-item>2</vd-swiper-item>
  <vd-swiper-item>3</vd-swiper-item>
</vd-swiper>

指示器位置

通过 indicator-position 属性设置指示器位置，可选值为 bottom bottom-left bottom-right top top-left top-right right right-top right-bottom left left-top left-bottom right。

<vd-swiper
  :height="200"
  indicator-type="page"
  indicator-position="bottom-right"
  @touchmove.stop.prevent
>
  <vd-swiper-item>1</vd-swiper-item>
  <vd-swiper-item>2</vd-swiper-item>
  <vd-swiper-item>3</vd-swiper-item>
</vd-swiper>

自动高度

通过 autosize 属性设置自动高度，设置后切换时会根据下一张卡片的高度自动调整。

<vd-swiper autosize @touchmove.stop.prevent>
  <vd-swiper-item>1</vd-swiper-item>
  <vd-swiper-item>2</vd-swiper-item>
  <vd-swiper-item>3</vd-swiper-item>
</vd-swiper>

绑定激活项

通过 active 绑定轮播当前的激活索引。

<vd-swiper v-model:active="active" @touchmove.stop.prevent>
  <vd-swiper-item>1</vd-swiper-item>
  <vd-swiper-item>2</vd-swiper-item>
  <vd-swiper-item>3</vd-swiper-item>
</vd-swiper>

const active = ref(0);

API

Swiper Props

参数	说明	类型	默认值
active	激活索引	number	0
height	轮播高度	string | number	-
autosize	是否自适应轮播高度	boolean	true
vertical	是否纵向轮播	boolean	false
autoplay	自动轮播间隔，0 时禁用	string | number	5000
duration	切换动画时长	number	500
loop	是否循环播放	boolean	true
swipeable	是否可滑动	boolean	true
swipe-limit	滑动限制	string | number	-
indicator	是否展示指示器	boolean	true
indicator-type	指示器类型	SwiperIndicatorType	dots
indicator-position	指示器位置	SwiperIndicatorPosition	横向滚动：'bottom' 垂直滚动：'right'

SwiperItem Props

参数	说明	类型	默认值
index	索引，小程序下循环列表时需要设置该值	string | number	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Swiper Events

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

SwiperItem Events

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

Swiper Slots

名称	说明
default	轮播卡片内容
indicator-page	页码指示器内容

SwiperItem Slots

名称	说明
default	自定义内容

Swiper Expose

方法名	说明	参数	返回值
prev	切换上一个	-	-
next	切换下一个	-	-
swipeTo	切换到指定索引	index: number	-