Swiper 轮播
走马灯,用于一组图片或卡片轮播
引入
import { Swiper } from 'mand-mobile-next'
Vue.createApp().component(Swiper.name, Swiper)
代码演示
API
Swiper Props
| 属性 | 说明 | 类型 | 默认值 | 可选值/备注 |
|---|---|---|---|---|
| autoplay | 自动切换间隔时长(毫秒), 禁用可设置为0 | Number | 3000 | 0, [500, +Int.Max) |
| transition | 面板切换动画效果 | String | slide | slide, slideY, fade |
| default-index | 第一屏面板索引值 | Number | 0 | [0, length - 1] |
| has-dots | 控制面板指示点 | Boolean | true | - |
| is-prevent | 阻止滚动区域点击事件 | Boolean | true | - |
| dragable | 触摸滑动 | Boolean | true | - |
| is-loop | 循环播放 | Boolean | true | - |
Swiper Events
@beforeChange(from, to)
轮播器将要切换前的事件
| 参数 | 说明 | 类型 |
|---|---|---|
| from | 轮播器当前展示的索引值 | Number |
| to | 轮播器下一屏展示的索引值 | Number |
@afterChange(from, to)
轮播器切换完成时的事件
| 参数 | 说明 | 类型 |
|---|---|---|
| from | 轮播器当前展示的索引值 | Number |
| to | 轮播器下一屏展示的索引值 | Number |
Swiper Methods
getSwiperInstance
获取 Bscroll 实例
resetSwiper
重置 swiper,用于异步渲染
Mand Mobile