1.0.0 • Published 5 years ago
react-swipe-view-fork v1.0.0
react-swipe-view-fork
a fork npm from https://github.com/legeneek/react-swipe-view
install
npm i react-swipe-view-forkusage
import SwipeView from 'react-swipe-view-fork'
<SwipeView cur={0} num={5} tabWidth={375} tabChange={tabChange} onSwipe={onSwipe} animation={{duration:0.3, timing: 'ease', delay: 0}} disableTouch={['.disabled']}>
{views}
</SwipeView>check the demo code at example folder and effect here
Prop Types
| Property | Type | Required? | Description |
|---|---|---|---|
| num | Number | ✓ | total number of tab view |
| tabWidth | Number | ✓ | width of each tab view |
| 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']. selector should not use , |