mina-touch

mina-touch，一个方便、轻量的 小程序 手势事件监听库
事件库部分逻辑参考alloyFinger，在此做出声明和感谢

change log：

1. 2019.03.10 优化监听和绘制逻辑，动画不卡顿
2. 2019.03.12 修复第二次之后缩放闪烁的 bug，pinch 添加 singleZoom 参数
3. 2020.12.13 更名 mina-touch
4. 2020.12.27 上传 npm 库；优化使用方式；优化 README

支持的事件

• 支持 pinch 缩放
• 支持 rotate 旋转
• 支持 pressMove 拖拽
• 支持 doubleTap 双击
• 支持 swipe 滑动
• 支持 longTap 长按
• 支持 tap 按
• 支持 singleTap 单击

扫码体验

demo 展示

1. demo1：监听 pressMove 拖拽 手势 查看 demo 代码

2. demo2: 监听 pinch 缩放 和 rotate 旋转 手势 (已优化动画卡顿 bug) 查看 demo 代码

3. demo3: 测试监听双击事件 查看 demo 代码

4. demo4: 测试监听长按事件 查看 demo 代码

demo 代码

demo 代码地址 mina-tools-client/mina-touch

使用方法

大致可以分为 4 步：

1. npm 安装 mina-touch，开发工具构建 npm
2. 引入 mina-touch
3. onload 实例化 mina-touch
4. 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:

1. 多类型事件监听触发 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:

1. 如果不影响业务，建议使用 catch 捕获事件，否则易造成监听动画卡顿（参考 demo2）

以上简单几步即可使用 mina-touch 手势库 😊😊😊

具体使用和参数请查看Github https://github.com/Yrobot/mina-touch

如果喜欢mina-touch的话，记得在github点个start哦！🌟🌟🌟