1.0.7 • Published 5 years ago
yus-swipe
基于 vue 的 轻量轮播组件。对于大部分应用来说 swiper 太大了, 所以需要一款轻量的轮播组件,yus-swipe 绝对能满足你的需求。
特性
- 支持水平或垂直模式
- 支持设置切换效果
- 支持动态添加或删除子项
- 兼容PC和h5
Examples
https://webang.github.io/yus-swipe/dist
Install
npm i yus-swipe -S
Usage
import Vue from 'vue'
import { Swipe, SwipeItem } from 'yus-swipe'
new Vue({
el: 'body',
components: {
Swiper,
SwipeItem
},
data() {
return {
loop: false,
autoplay: false,
speed: 300,
direction: 'horizontal',
activeIndex: 0
}
},
methods: {
handleIndexChanged(index) {
this.activeIndex = index;
}
}
});
<Swipe
direction="horizontal"
:activeIndex="activeIndex"
:loop="loop"
:speed="speed"
:autoplay="autoplay"
@index-changed="handleIndexChanged"
>
<SwipeItem>1</SwipeItem>
<SwipeItem>2</SwipeItem>
<SwipeItem>3</SwipeItem>
</Swipe>
API
Properties
Name | Type | Default | Description |
---|
direction | String | "horizontal" | 'horizontal' or 'vertical' is available |
activeIndex | Number | 0 | Index number of initial slide |
speed | Number | 300 | Duration of transition between slides (in ms) |
autoplay | Boolean | false | Set true enable auto play |
delay | Number | 3000 | wait time when enable autoplay |
loop | Boolean | false | Set true to enable continuous loop mode |
space-between | Number | 0 | distance between adjacent slides |
width | Number | - | container width |
height | Number | - | container height |
Methods
Method | Description |
---|
slideNext() | Go next page. |
slidePrev() | Go previous page. |
slideTo(Number ) | slide to number. |
Events
Name | Parameters | Description |
---|
index-changed | index | current slide index |
Slots
Name | Description |
---|
pagination | slide pagination |