1.0.0 • Published 3 years ago

lg-swiper v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

多图轮播组件

一屏可显示多个内容物,一次移动一个内容物

安装

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-numNumber一屏显示的内容物个数3
initial-ndexNumber初始状态激活的内容物的索引(即最左侧内容物对应索引)0
item-widthNumber单个内容物的宽度,不传则默认为第一个内容物的宽度第一个内容物的宽度
autoplayBoolean是否自动切换true
intervalNumber自动切换的时间间隔,单位为毫秒2000
directionString自动切换的方向,prev or nextnext

方法

方法名描述参数
prev切换至上一个内容物-
next切换至下一个内容物-
setActiveItem手动切换内容物需要切换的内容物的索引,从 0 开始

回调事件

事件描述回调参数
change内容物切换时触发目前激活的内容物的索引,原内容物的索引