mina-touch,一个方便、轻量的小程序手势事件监听库
mina-touch
,一个方便、轻量的 小程序 手势事件监听库
事件库部分逻辑参考alloyFinger
,在此做出声明和感谢
demo1:监听 pressMove 拖拽 手势 查看 demo 代码
demo2: 监听 pinch 缩放 和 rotate 旋转 手势 (已优化动画卡顿 bug) 查看 demo 代码
demo3: 测试监听双击事件 查看 demo 代码
demo4: 测试监听长按事件 查看 demo 代码
demo 代码地址 mina-tools-client/mina-touch
大致可以分为 4 步:
npm install mina-touch
安装完成后,开发工具构建 npm
import MinaTouch from 'mina-touch'; // 1. 引入mina-touch
Page({
onLoad: function (options) {
new MinaTouch(this, 'touch1', {
// 2. onload实例化mina-touch
//会创建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);
},
});
},
});
NOTE:
在 view 上绑定事件并对应:
<view
catchtouchstart="touch1.start"
catchtouchmove="touch1.move"
catchtouchend="touch1.end"
catchtouchcancel="touch1.cancel"
>
</view>
<!--
touchstart -> 实例对象名.start
touchmove -> 实例对象名.move
touchend -> 实例对象名.end
touchcancel -> 实例对象名.cancel
-->
NOTE:
以上简单几步即可使用 mina-touch 手势库