vue-swiper-view

使用vue模块切换的swiper
本组件是使用同事开发的react-swipe-view转到vue的组件,因为项目需要所以自己做了转换
具体地址是:https://github.com/legeneek/react-swipe-view

install

npm i vue-swiper-view
import vueSwiperView from 'vue-swiper-view'
Vue.use(vueSwiperView)
or
npm i vue-swiper-view
import vueSwiperView from 'vue-swiper-view'

use

<vue-swiper-view
      :cur="0"
      :num="3"
      :tabWidth="375"
      @onSwipe="onSwipe"
      @tabChange="tabChange"
    >
    <div>1<div>
    <div>2<div>
    <div>3<div>
    </vue-swiper-view>

Prop Types

Property	Type	Required?	Description
num	Number	✓	total number of tab view
tabWidth	Number	✓	width of each tab view(px). this is the width of tab container, you need to set the width of view yourself
cur	Number		current tab index start from 0, default 0
fastSwipeTime	Number		swipe time less then fastSwipeTime(default 300ms) will cause tab view change
tabChange	Function		callback invoked when tab view changed by user's gesture (index: Number): void
onSwipe	Function		callback invoked when user is sliding (isSwipe: Boolean):void, if user is sliding horizontally isSwipe is true else false
containerStyle	Object		this component use display: flex to layout inner tab views, set containerStyle to change it
animation	Object		define the animation props for tab transition. eg:{duration: 0.3, timing: 'ease', delay: 0}
disableTouch	Array		an array of dom selectors, indicate the dom not trigger touch effect. eg: ['.disabled', '.no-touch'].