使用vue模块切换的swiper
本组件是使用同事开发的react-swipe-view转到vue的组件,因为项目需要所以自己做了转换
具体地址是:https://github.com/legeneek/react-swipe-view
欢迎给他个start-.-!
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'
<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>
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'] . |