w-touch
v2.0.0
Published
Gesture library for pc and mobile
Downloads
226
Maintainers
Readme
特点
- 支持鼠标和手指操作 (内部统一Mouse & Touch事件处理)
- 使用 TypeScript 编写,内置类型定义文件,良好的智能提示
- 支持多种手势
手势
- 单击 onSingleTap
- 双击 onDoubleTap
- 长按 onLongTap
- 旋转 onRotate
- 缩放 onPinch
- 单指滑动 onPressMove
- 滑动方向判断 onSwipe
- 双指滑动 onTwoFingerPressMove
js 使用
import Touch from 'w-touch';
// 构造对象,参数见下面类型定义说明
const touch = new Touch(el as Element, {
onDoubleTap() {
},
onLongTap() {
},
onPinch({ scale }) {
},
onRotate({ angle }) {
},
onPressMove({ deltaX, deltaY }) {
},
onSwipe({ direction }) {
},
});
// 销毁
touch.destroy();
React 绑定 (Vue同理)
import * as React from 'react';
import Touch, { Options } from 'w-touch';
type Props = {
/** 手势操作元素,如果是组件,需要forwardRef到dom */
children: React.ReactElement;
} & Options;
const checkFailed = () => {
throw new Error('TouchElement: 子元素必须是dom/forwardRef到dom的组件');
};
/** 给子元素添加手势操作 */
const TouchElement = React.forwardRef<Element, Props>((props, ref) => {
const { children, ...rest } = props;
const elRef = React.useRef<Element>(null);
React.useImperativeHandle(ref, () => elRef.current as Element);
React.useLayoutEffect(() => {
const el = elRef.current;
if (!(el instanceof Element)) {
checkFailed();
}
const fg = new Touch(el as Element, rest as Options);
return () => {
fg.destroy();
};
}, []);
if (!React.isValidElement(children)) {
checkFailed();
}
return <children.type {...(children.props as Record<string, unknown>)} ref={elRef} />;
});
TouchElement.displayName = 'TouchElement';
export default TouchElement;
事件类型
type Options = Partial<{
onTouchStart: (evt: WTouchEvent) => void,
onTouchMove: (evt: WTouchEvent) => void,
onTouchEnd: (evt: WTouchEvent) => void,
onTouchCancel: (evt: WTouchEvent) => void,
onMultipointStart: (evt: WTouchEvent) => void,
onMultipointEnd: (evt: WTouchEvent) => void,
/** 点两次 */
onDoubleTap: () => void,
/** 长按 */
onLongTap: () => void,
/** 按一次 */
onSingleTap: () => void,
/** 旋转, 单位:deg */
onRotate: (evt: WTouchEvent & { angle: number }) => void,
/** 缩放 */
onPinch: (evt: WTouchEvent & { scale: number }) => void,
/** 单指滑动 */
onPressMove: (evt: WTouchEvent & { deltaX: number, deltaY: number }) => void,
/** 左右滑动 */
onSwipe: (evt: WTouchEvent & { direction: 'left' | 'right' | 'up' | 'down' }) => void,
/** 双指滑动 */
onTwoFingerPressMove: (evt: WTouchEvent & { deltaX: number, deltaY: number }) => void,
}>;