any-touch
一个手势库, 支持微信小程序 / 鼠标 / touch / vue
安装
npm i -S any-touch
CDN
unpkg.com/any-touch/dist/AnyTouch.umd.min.js
快速开始
import AnyTouch from "any-touch";
const el = doucument.getElementById("box");
const at = new AnyTouch(el);
// 单击
at.on("tap", ev => {
// 阻止默认事件触发, 比如click
ev.preventDefault();
});
支持哪些手势?
tap(点击)
还支持: doubletap(双击), 以及可以自定义任意多击.
press(按)
还支持: pressup(按后松手)
pan(拖拽)
还支持衍生事件: panstart(拖拽开始)/panmove(拖拽中)/panend(拖拽结束)/panleft(向左拖拽)/panright/panup/pandown
pinch(缩放)
还支持: pinchstart(缩放开始)/pinchmovet(缩放中)/pinchend(缩放结束)/pinchin(缩小)/pinchout(放大)
rotate(旋转)
还支持: rotatestart(旋转开始)/rotatemove(旋转中)/rotateend(旋转结束)
事件对象(ev)
名称数据类型说明
typeString事件名, 如 tap/pan 等
eventTypeString事件类型: start
xNumber当前触点中心x坐标
yNumber当前触点中心y 坐标
deltaXNumber当前触点和前触点的 x 轴偏移距离
deltaYNumber当前触点和前触点的 y 轴偏移距离
deltaXYAngleNumber当前触点相对前触点的角度变化(相对于 x 轴)
displacementXNumber当前触点与起始触点的 x 位移(矢量)
displacementYNumber当前触点与起始触点的 y 位移(矢量)
distanceXNumberdisplacementX 的绝对值
distanceYNumberdisplacementY 的绝对值
distanceNumber当前触点与起始触点的距离(标量)
deltaTimeNumber当前时间与起始时间的差值
velocityXNumber当前 x 速度, 每 25ms 进行一次刷新
velocityYNumber当前 y 速度, 每 25ms 进行一次刷新
directionNumber前触点与当前触点的方向, 可以理解为瞬时方向, 每 25ms 进行一次刷新
overallDirectionString是否当前识别周期的开始
angleNumber多点触摸时, 起始触点与当前触点的旋转角度
deltaAngleNumber多点触摸时, 前触点与当前触点的旋转角度
scaleNumber多点触摸时, 起始触点与当前触点的缩放比例
deltaScaleNumber多点触摸时, 前触点与当前触点的缩放比例
maxPointLengthNumber本轮识别周期出现过的最大触点数
isStartBoolean是否当前识别周期的开始
isEndBoolean是否当前识别周期的结束
targetEventTarget绑定事件的元素
currentTargetEventTarget实际触发绑定事件的元素
timestampNumber当前时间
nativeEventTouchEventMouseEvent`
支持微信小程序
由于微信小程序中没有 dom 元素的概念, 所以我们需要通过useEvent方法手动接收 touch 事件的事件对象来进行识别!
const at = new AnyTouch();
{
onload(){
at.on('pan', ev=>{
// 拖拽
});
},
methods:{
touchstartHandler(ev){
at.useEvent(ev);
},
touchmoveHandler(ev){
at.useEvent(ev);
},
touchendHandler(ev){
at.useEvent(ev);
}
}
}
支持vue指令
AnyTouch上的vTouch是一个vue指令, 初始化后可以在元素上添加v-touch进行绑定.
// main.js
Vue.use(AnyTouch.vTouch);
@tap="tap"
@doubletap="doubletap"
@press="press"
@pan="pan"
@pinch="pinch"
@rotate="rotate"
@click="click">touch
此时div上可以通过v-on进行手势的绑定,和绑定click等原生事件一样. 通过v-touch我们还可以导出AnyTouch的实例.
识别器
识别器就是识别如下手势的代码逻辑: 点击(tap) | 拖拽(pan) | 划(swipe) | 捏合缩放(pinch) | 旋转(rotate).
requireFailure
如果你需要某 2 个手势的触发条件是互斥的, 那么就需要通过 requireFailure 来标记他们, 当一个"识别失败"另一个才能触发, 如单击和双击就是互斥关系的 2 个手势.
不要用alert调试
在安卓手机的真机上, 如果touchstart或touchmove阶段触发了alert, 会出现后续的touchmove/touchend不触发的bug. 所以请大家务必避免在手势的事件回调中使用alert.
开源地址：
https://github.com/any86/any-touch
更多更优质的资讯，请关注我，你的支持会鼓励我不断分享更多更好的优质文章。
本文来自投稿，不代表本人立场，如若转载，请注明出处：http://www.souzhinan.com/kj/110989.html