代码拉取完成，页面将自动刷新
Support gesture for react component, inspired by hammer.js and AlloyFinger.
npm install --save rc-gesture
import Gesture from 'rc-gesture';
ReactDOM.render(
<Gesture
onTap={(gestureStatus) => { console.log(gestureStatus); }}
>
<div>container</div>
</Gesture>,
container);
all callback funtion will have one parammeter: type GestureHandler = (s: IGestureStatus) => void;
| name | type | default | description |
|---|---|---|---|
| direction | string | `all` | control the allowed gesture direction, could be `['all', 'vertical', 'horizontal']` |
| name | type | default | description |
|---|---|---|---|
| onTap | function | single tap callback | |
| onPress | function | long tap callback | |
| onPressOut | function | long tap end callback |
| name | type | default | description |
|---|---|---|---|
| onSwipe | function | swipe callback, will triggered at the same time of all of below callback | |
| onSwipeLeft | function | swipe left callback | |
| onSwipeRight | function | swipe right callback | |
| onSwipeTop | function | swipe top callback | |
| onSwipeBottom | function | swipe bottom callback |
| name | type | default | description |
|---|---|---|---|
| onPan | function | pan callback, will triggered at the same time of all of below callback | |
| onPanStart | function | drag start callback | |
| onPanMove | function | drag move callback | |
| onPanEnd | function | drag end callback | |
| onPanCancel | function | drag cancel callback | |
| onPanLeft | function | pan left callback | |
| onPanRight | function | pan right callback | |
| onPanTop | function | pan top callback | |
| onPanBottom | function | pan bottom callback |
pinch gesture is not enabled by default, you must set props.enablePinch = true at first;
| name | type | default | description |
|---|---|---|---|
| onPinch | function | pinch callback, will triggered at the same time of all of below callback | |
| onPinchStart | function | pinch start callback | |
| onPinchMove | function | pinch move callback | |
| onPinchEnd | function | pinch end callback | |
| onPanCancel | function | pinch cancel callback | |
| onPinchIn | function | pinch in callback | |
| onPinchOut | function | pinch out callback |
pinch gesture is not enabled by default, you must set props.enableRotate = true at first;
| name | type | default | description |
|---|---|---|---|
| onRotate | function | rotate callback, will triggered at the same time of all of below callback | |
| onRotateStart | function | rotate start callback | |
| onRotateMove | function | rotate move callback | |
| onRotateEnd | function | rotate end callback | |
| onRotateCancel | function | rotate cancel callback |
// http://hammerjs.github.io/api/#event-object
export interface IGestureStauts {
/* start status snapshot */
startTime: number;
startTouches: Finger[];
startMutliFingerStatus?: MultiFingerStatus[];
/* now status snapshot */
time: number;
touches: Finger[];
mutliFingerStatus?: MultiFingerStatus[];
/* delta status from touchstart to now, just for singe finger */
moveStatus?: SingeFingerMoveStatus;
/* whether is a long tap */
press?: boolean;
/* whether is a swipe*/
swipe?: boolean;
direction?: number;
/* whether is in pinch process */
pinch?: boolean;
scale?: number;
/* whether is in rotate process */
rotate?: boolean;
rotation?: number; // Rotation (in deg) that has been done when multi-touch. 0 on a single touch.
};
npm install
npm start
npm start and then go to http://localhost:8005/examples/
Online examples: http://react-component.github.io/gesture/
http://localhost:8005/tests/runner.html?coverage
http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage
rc-gesture is released under the MIT license.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手