w-touch

特点

• 支持鼠标和手指操作 (内部统一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,
}>;