Swiper 轮播

走马灯,用于一组图片或卡片轮播

引入

import { Swiper } from 'mand-mobile-next'

Vue.createApp().component(Swiper.name, Swiper)

代码演示

API

Swiper Props

属性说明类型默认值可选值/备注
autoplay自动切换间隔时长(毫秒), 禁用可设置为0Number30000, [500, +Int.Max)
transition面板切换动画效果Stringslideslide, slideY, fade
default-index第一屏面板索引值Number0[0, length - 1]
has-dots控制面板指示点Booleantrue-
is-prevent阻止滚动区域点击事件Booleantrue-
dragable触摸滑动Booleantrue-
is-loop循环播放Booleantrue-

Swiper Events

@beforeChange(from, to)

轮播器将要切换前的事件

参数说明类型
from轮播器当前展示的索引值Number
to轮播器下一屏展示的索引值Number

@afterChange(from, to)

轮播器切换完成时的事件

参数说明类型
from轮播器当前展示的索引值Number
to轮播器下一屏展示的索引值Number

Swiper Methods

getSwiperInstance

获取 Bscroll 实例

resetSwiper

重置 swiper,用于异步渲染