1.0.0 • Published 3 years ago
lg-swiper v1.0.0
多图轮播组件
一屏可显示多个内容物,一次移动一个内容物
安装
npm i --save lg-swiper
如何使用
使用举例
template:
<swiper ref="swiper" :autoplay="false" @change="swiperChange">
<div v-for="i in 7" :key="i" class="item">
<div class="content">{{ i }}</div>
</div>
</swiper>
script:
import swiper from 'lg-swiper'
methods: {
swiperChange(newIndex, oldIndex) {
console.log("swiperChange", newIndex, oldIndex);
}
}
参数
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
show-num | Number | 一屏显示的内容物个数 | 3 |
initial-ndex | Number | 初始状态激活的内容物的索引(即最左侧内容物对应索引) | 0 |
item-width | Number | 单个内容物的宽度,不传则默认为第一个内容物的宽度 | 第一个内容物的宽度 |
autoplay | Boolean | 是否自动切换 | true |
interval | Number | 自动切换的时间间隔,单位为毫秒 | 2000 |
direction | String | 自动切换的方向,prev or next | next |
方法
方法名 | 描述 | 参数 |
---|---|---|
prev | 切换至上一个内容物 | - |
next | 切换至下一个内容物 | - |
setActiveItem | 手动切换内容物 | 需要切换的内容物的索引,从 0 开始 |
回调事件
事件 | 描述 | 回调参数 |
---|---|---|
change | 内容物切换时触发 | 目前激活的内容物的索引,原内容物的索引 |
1.0.0
3 years ago