1.0.7 • Published 5 years ago

yus-swipe v1.0.7

Weekly downloads
35
License
-
Repository
github
Last release
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

NameTypeDefaultDescription
directionString"horizontal"'horizontal' or 'vertical' is available
activeIndexNumber0Index number of initial slide
speedNumber300Duration of transition between slides (in ms)
autoplayBooleanfalseSet true enable auto play
delayNumber3000wait time when enable autoplay
loopBooleanfalseSet true to enable continuous loop mode
space-betweenNumber0distance between adjacent slides
widthNumber-container width
heightNumber-container height

Methods

MethodDescription
slideNext()Go next page.
slidePrev()Go previous page.
slideTo(Number)slide to number.

Events

NameParametersDescription
index-changedindexcurrent slide index

Slots

NameDescription
paginationslide pagination
1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago