如何监听小程序中的手势事件(缩放、双击、长按、滑动、拖拽)
mina-touch
[图片]
[代码]mina-touch[代码],一个方便、轻量的 小程序 手势事件监听库
事件库部分逻辑参考[代码]alloyFinger[代码],在此做出声明和感谢
change log:
2019.03.10 优化监听和绘制逻辑,动画不卡顿
2019.03.12 修复第二次之后缩放闪烁的 bug,pinch 添加 singleZoom 参数
2020.12.13 更名 mina-touch
2020.12.27 上传 npm 库;优化使用方式;优化 README
支持的事件
支持 pinch 缩放
支持 rotate 旋转
支持 pressMove 拖拽
支持 doubleTap 双击
支持 swipe 滑动
支持 longTap 长按
支持 tap 按
支持 singleTap 单击
扫码体验
[图片]
demo 展示
demo1:监听 pressMove 拖拽 手势 查看 demo 代码
[图片]
[图片]
demo2: 监听 pinch 缩放 和 rotate 旋转 手势 (已优化动画卡顿 bug) 查看 demo 代码
[图片]
[图片]
demo3: 测试监听双击事件 查看 demo 代码
[图片]
[图片]
demo4: 测试监听长按事件 查看 demo 代码
[图片]
[图片]
demo 代码
demo 代码地址 mina-tools-client/mina-touch
使用方法
大致可以分为 4 步:
npm 安装 mina-touch,开发工具构建 npm
引入 mina-touch
onload 实例化 mina-touch
wxml 绑定实例
命令行
[代码]npm install mina-touch[代码]
安装完成后,开发工具构建 npm
*.js
[代码]import MinaTouch from 'mina-touch'; // 1. 引入mina-touch
Page({
onLoad: function (options) {
// 2. onload实例化mina-touch
//会创建this.touch1指向实例对象
new MinaTouch(this, 'touch1', {
// 监听事件的回调:multipointStart,doubleTap,longTap,pinch,pressMove,swipe等等
// 具体使用和参数请查看github-README(底部有github地址
});
},
});
[代码]
NOTE:
多类型事件监听触发 setData 时,建议把数据合并,在 touchMove 中一起进行 setData ,以减少短时内多次 setData 引起的动画延迟和卡顿(参考 demo2)
*.wxml
在 view 上绑定事件并对应:
[代码]<view
catchtouchstart="touch1.start"
catchtouchmove="touch1.move"
catchtouchend="touch1.end"
catchtouchcancel="touch1.cancel"
>
</view>
<!--
touchstart -> 实例对象名.start
touchmove -> 实例对象名.move
touchend -> 实例对象名.end
touchcancel -> 实例对象名.cancel
-->
[代码]
NOTE:
如果不影响业务,建议使用 catch 捕获事件,否则易造成监听动画卡顿(参考 demo2)
以上简单几步即可使用 mina-touch 手势库 😊😊😊
具体使用和参数请查看Github https://github.com/Yrobot/mina-touch
如果喜欢mina-touch的话,记得在github点个start哦!🌟🌟🌟