默认 any-touch 支持所有手势, 为了更小的体积, 提供了按需加载.
// 只加载pan识别器(拖拽)
import AT from 'any-touch';
const at = AT(el);
at.on('tap', (e) => {});
at.on('pan', (e) => {});
// 同时监听多个事件
at.on(['swipe', 'press', 'rotate', 'pinch'], (e) => {});
@any-touch/core
是核心包, 用来兼容 mouse/touch 输入, 具体的手势需要加载对应的识别器, 比如@any-touch/pan
拖拽识别器.
npm i -S @any-touch/core # 核心
npm i -S @any-touch/tap # 点击
npm i -S @any-touch/pan # 拖拽
npm i -S @any-touch/press # 按压
npm i -S @any-touch/swipe # 快划
npm i -S @any-touch/pinch # 缩放
npm i -S @any-touch/rotate # 旋转
npm i -S @any-touch/doubletap # 双击(通过tap扩展的特例)
汇成一行:
npm i -S @any-touch/core @any-touch/tap @any-touch/pan @any-touch/press @any-touch/swipe @any-touch/pinch @any-touch/rotate @any-touch/doubletap
// 只加载pan识别器(拖拽)
import Core from '@any-touch/core';
import pan from '@any-touch/pan
// Core不识别任何手势.
const at = new Core(el);
// 加载pan
at.use(pan);
at.on('pan', e=>{});
手势库的核心组件, 主要用来实现 PC/移动端的兼容(查看更多).
手势识别器均已做成独立的包, 从而实现按需加载.
名称 | 说明 |
---|---|
@any-touch/tap | 点击 |
@any-touch/pan | 拖拽 |
@any-touch/swipe | 划 |
@any-touch/press | 按压 |
@any-touch/pinch | 缩放 |
@any-touch/rotate | 旋转 |