YrobotTouch
,一个方便、轻量的 小程序 手势事件监听库
事件库部分逻辑参考alloyFinger
,在此做出声明和感谢
- 2019年3月10日 09:42:19 - 优化监听和绘制逻辑,动画不卡顿
- 2019年3月12日 09:51:04 - 修复第二次之后缩放闪烁的bug,pinch添加singleZoom参数
- 支持pinch缩放
- 支持rotate旋转
- 支持pressMove拖拽
- 支持doubleTap双击
- 支持swipe滑动
- 支持longTap长按
- 支持tap按
- 支持singleTap单击
tips: 整个仓库是一个demo,核心文件是'/utils/YrobotTouch.js',只需下载此js文件即可
- 引入YrobotTouch
- 在page的onload生命周期中实例化YrobotTouch
实例化语法:
new YrobotTouch(page实例,实例对象名,option)
实例对象名:影响到wxml引用的方法名,以及page页储存实例的索引
option:包含各个手势事件的出口函数,具体函数及解析如下参考
NOTE:
- 多个事件监听触发setData时,建议把setData合并在touchMove中,以减少多个setData引起的动画延迟和卡顿(参考demo2)
参考:
import YrobotTouch from "../../utils/YrobotTouch"; //引入YrobotTouch
Page({
onLoad: function (options) {
new YrobotTouch(this, 'touch1', { //会创建this.touch1指向实例对象
touchStart: function () { },
touchMove: function () { },
touchEnd: function () { },
touchCancel: function () { },
multipointStart: function () { console.log('multipointStart') }, //一个手指以上触摸屏幕触发
multipointEnd: function () { console.log('multipointEnd') }, //当手指离开,屏幕只剩一个手指或零个手指触发(一开始只有一根手指也会触发)
tap: function () { console.log('Tap') }, //点按触发,覆盖下方3个点击事件,doubleTap时触发2次
doubleTap: function () { console.log('doubleTap') }, //双击屏幕触发
longTap: function () { console.log('longTap') }, //长按屏幕750ms触发
singleTap: function () { console.log('singleTap') }, //单击屏幕触发,包括长按
rotate: function (evt) { //evt.angle代表两个手指旋转的角度
console.log('rotate:' + evt.angle);
},
pinch: function (evt) { //evt.zoom代表两个手指缩放的比例(多次缩放的累计值),evt.singleZoom代表单次回调中两个手指缩放的比例
console.log('pinch:' + evt.zoom);
},
pressMove: function (evt) { //evt.deltaX和evt.deltaY代表在屏幕上移动的距离,evt.target可以用来判断点击的对象
console.log(evt.target);
console.log(evt.deltaX);
console.log(evt.deltaY);
},
swipe: function (evt) { //在touch结束触发,evt.direction代表滑动的方向 ['Up','Right','Down','Left']
console.log("swipe:" + evt.direction);
}
});
},
});
在view中绑定事件并对应:
touchstart -> 实例对象名.start
touchmove -> 实例对象名.move
touchend -> 实例对象名.end
touchcancel -> 实例对象名.cancel
NOTE:
- 建议使用catch捕获事件,否则易造成监听动画卡顿(参考demo2)
参考:(上例js中事例对象名为'touch1')
<view class="box" catchtouchstart="touch1.start" catchtouchmove="touch1.move" catchtouchend="touch1.end" catchtouchcancel="touch1.cancel">
<view id="target"></view>
</view>
以上简单两步即可使用YrobotTouch手势库
Yrobot
2019年3月1日 01:55:24