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 |