👋 一个基于typescript实现的手势库.
- 支持更多设备: PC端 / 移动端 / 微信小程序.
- 支持手势更全面: tap(点击) / press(按) / pan(拖拽) / swipe(划) / pinch(捏合) / rotate(旋转) 6大类手势.
- 更简单: 支持 vue指令.
- 更放心: 代码测试覆盖率100%.
npm i -S any-touch
https://unpkg.com/any-touch/dist/any-touch.min.js
// vue指令插件
https://unpkg.com/any-touch/dist/any-touch.v-touch.min.js
import AnyTouch from "any-touch";
const el = doucument.getElementById("box");
const at = new AnyTouch(el);
// 单击
at.on("tap", ev => {
// 阻止默认事件触发, 比如click
ev.preventDefault();
});
根据手势的运动方向和状态我们还支持panstart / panup / pinchin / pinchout / pressup等更多的手势事件.
// 旋转中触发
at.on('roatemove', ev=>{});
由于微信小程序中没有 dom 元素的概念, 所以我们需要通过catchEvent
方法手动接收 touch 事件的事件对象来进行识别!
<view @touchstart="touchstartHandler" @touchmove="touchmoveHandler" @touchend="touchendHandler"></view>
const at = new AnyTouch()
{
onload(){
at.on('pinch', ev=>{
// 缩放
});
},
methods: {
touchstartHandler(ev){
at.catchEvent(ev);
},
touchmoveHandler(ev){
at.catchEvent(ev);
},
touchendHandler(ev){
at.catchEvent(ev);
}
}
}
import vTouch from 'any-touch/dist/v-touch.common'
Vue.use(vTouch);
<!-- xxx.vue -->
<div
v-touch
@tap="tap"
@doubletap="doubletap"
@press="press"
@pan="pan"
@pinch="pinch"
@rotate="rotate"
@click="click"
>hello v-touch</div>
此时div
上可以通过v-on
进行手势的绑定,和绑定 click 等原生事件一样.
我们可以通过v-touch导入AnyTouch的实例, 然后进行高级设置.
<!-- xxx.vue -->
<div v-touch="importAT" @tap="tap">touch</div>
export default {
methods: {
importAT(at) {
const doubletap = at.get("doubletap");
// 开启双击
doubletap.disabled = false;
}
}
};
名称 | 类型 | 默认值 | 简要说明 |
---|---|---|---|
touchAction | String |
'compute' |
对应css的touch-action属性 |
hasDomEvents | Boolean |
true |
是否派发手势名对应的原生事件 |
isPreventDefault | Boolean |
true |
是否阻止默认事件 |
preventDefaultExclude | RegExp | ((ev: SupportEvent) => boolean) |
/^(INPUT|TEXTAREA|BUTTON|SELECT)$/ |
符合条件可不阻止默认事件的触发 |
syncToAttr | Boolean |
true |
是否在元素上的at-gesture 属性赋值当前手势名 |
cssPrevent | Object |
{selectText: true,drag: true, tapHighlight: true, callout: true} |
是否开启上述禁止浏览器默认事件的css属性 |
❗❗❗ 在安卓手机的真机上, 如果touchstart
或touchmove
阶段触发了alert
, 会出现后续的touchmove/touchend
不触发的 bug. 所以请大家务必避免在手势的事件回调中使用alert
.
测试代码
如果仅仅是了在移动端调试, 请使用腾讯的vconsole
因为"双击"的识别需要让"单击"等待他的"第二下单击", 如果没有"第二下单击", 那么"单击"触发, 否则识别为"双击".
基于上面的逻辑, 如果默认开启了"双击", 那么没有"双击"需求的人用的时候就会觉得"单击"反应慢(因为再等双击), 出于对"大多数人没有双击需求"的考虑, 默认"双击"是关闭状态.
开启方式:
const at = new AnyTouch(el);
const doubletap = at.get("doubletap");
// 开启双击
doubletap.disabled = false;