Skip to content

Latest commit

 

History

History
261 lines (213 loc) · 10.4 KB

README.CN.md

File metadata and controls

261 lines (213 loc) · 10.4 KB
Raw

any-touch NPM Version NPM Downloads size-image codecov CircleCI

6类手势

  • 支持 PC 端 / 移动端 / 微信小程序.
  • 默认加载6 个手势识别器, 也可按需加载, 核心1kb, 完整5kb.
  • 无依赖, 不限于 Vue / React / Angular 等...

语言

中文 | English

演示

查看二维码

简单演示

衍生产物: any-scroll(虚拟滚动)

安装

npm i -S any-touch

CDN

<script src="https://unpkg.com/any-touch/dist/any-touch.umd.min.js"></script>
<script>
    console.log(AnyTouch.version); // 2.x.x
</script>

目录

⚡ 快速开始

🌱 vue&指令

🍀 微信小程序

📐 按需加载

🌈 进阶使用

💡 API

🍳 常见问题

快速开始

import AnyTouch from 'any-touch';

// 被监视的元素
const el = document.getElementById('box');

// 开始监视el上的手势变化
const at = new AnyTouch(el);

// 当拖拽的时候pan事件触发
at.on('pan', (e) => {
    // e包含位移/速度/方向等信息
    console.log(e);
});

这里的pan叫做手势事件. e是事件对象, 其包含"位置/速度/缩放/角度"等数据,

👋 手势事件

每个手势的不同状态都对应一个事件.

手势 事件名 说明
pan 拖拽时持续触发
panstart 拖拽开始
panmove 拖拽中
panstart 拖拽停止(离开屏幕)
panup / pandown / panright / panleft 不同方向的拖拽事件
press press 按压
press 按压释放(离开屏幕)
tap tap 点击
swipe swipe 快划
swipeup / swipedown / swiperight / swipeleft 不同方向快划
pinch pinch 缩放
pinchstart 缩放开始
pinchmove 缩放中
pinchend 缩放结束(离开屏幕)
pinchin 放大
pinchout 缩小
rotate rotate 旋转
rotatestart 旋转开始
rotatemove 旋转中
rotateend 旋转结束(离开屏幕)

组合事件

可以通过数组监听多个事件, 比如同时监听panleft和panright, 这样就实现监听"x 轴拖拽".

at.on(['panleft', 'panright'], () => {
    console.log('x轴拖拽');
});

🚀 返回目录

🍭 事件对象(event)

事件触发的时候, 可以获取"位置/速度/缩放/角度"等数据.

at.on('pan', (event) => {
    // event包含速度/方向等数据
});

event

名称 数据类型 说明
name String 识别器名, 如:pan/tap/swipe等.
type String 事件名,如 tap/panstart 等,他比name字段范围大,如:当type是 panstart 或 panmove, 而name返回的都是 pan
phase String 当前触碰状态: start | move |end | cancel 对应: 第一下触碰 | 屏幕上移动 | 离开屏幕 | 非正常离开 "可 anyTouch"元素
x Number 当前触点中心x 坐标
y Number 当前触点中心y 坐标
deltaX Number 当前触点和前触点的 x 轴偏移距离
deltaY Number 当前触点和前触点的 y 轴偏移距离
displacementX Number 当前触点与起始触点的 x 位移(矢量)
displacementY Number 当前触点与起始触点的 y 位移(矢量)
distanceX Number displacementX 的绝对值
distanceY Number displacementY 的绝对值
distance Number 当前触点与起始触点的距离(标量)
deltaTime Number 当前时间与起始触碰时间的差值
velocityX Number 当前 x 轴速度
velocityY Number 当前 y 轴速度
direction Number 前触点与当前触点的方向,可以理解为瞬时方向
angle Number 多点触摸时,起始触点与当前触点的旋转角度
deltaAngle Number 多点触摸时,前触点与当前触点的旋转角度
scale Number 多点触摸时,起始触点与当前触点的缩放比例
deltaScale Number 多点触摸时,前触点与当前触点的缩放比例
maxPointLength Number 本轮识别周期出现过的最大触点数
isStart Boolean 是否当前识别周期的开始, 规律为从 touchstart->touchend 即是一个周期, 即便多点触碰, 有一个点离开,本轮识别结束
isEnd Boolean 是否当前识别周期的结束
target EventTarget 绑定事件的元素
targets EventTarget[] 对应多个触点会存储 touches 中的每一个 target
currentTarget EventTarget 实际触发绑定事件的元素
nativeEvent TouchEvent 原生事件对象

🚀 返回目录

Typescript

如果在 vue 模板中绑定事件函数, 那么事件对象的类型是没法推导的, 所以需要我们自己手动标注.

<div @tap="onTap"></div>
// xxx.vue
import type { AnyTouchEvent } from 'any-touch';
function onTap(e: AnyTouchEvent) {
    // 可以正确推导出e上有x属性
    console.log(e.x);
}

🚀 返回目录