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