评论

如何监听小程序中的手势事件(缩放、双击、长按、滑动、拖拽)

一个为小程序定制的手势监听事件库 - mina-touch

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哦!🌟🌟🌟

最后一次编辑于  06-24  
点赞 7
收藏
评论

8 个评论

  • Yrobot
    Yrobot
    06-24

    之前图挂了,刚刚更新了一下。然后添加了demo代码的地址。

    如果同学们之后发现文章有什么问题,可以直接评论一下,这样我就可以马上知道了。

    06-24
    赞同
    回复
  • 大虾虾
    大虾虾
    06-11

    这个在uniapp怎么使用?

    06-11
    赞同
    回复 1
    • Yrobot
      Yrobot
      06-21
      uniapp的事件系统应该也是对其小程序和web的,所以直接像README一样,引入mina-touch,实例化,然后绑定到要监听的节点上就行了。
      06-21
      回复
  • kiki~
    kiki~
    2020-11-05

    多谢楼主 解决了我的问题

    2020-11-05
    赞同
    回复
  • 灿灿
    灿灿
    2020-09-27

    你好,下载了demo查看不能直接运行呃

    2020-09-27
    赞同
    回复 5
  • Nov_52HZ
    Nov_52HZ
    2019-08-26

    mpvue应该如何使用呢?

    2019-08-26
    赞同
    回复 3
    • Yrobot
      Yrobot
      2019-08-29
      将将监听对象的4个touch事件绑定到YrobotTouch的实例对象中(参考.wxml),其他和文档中js用法一致
      2019-08-29
      回复
    • Yrobot
      Yrobot
      2019-08-29回复Yrobot
      应引用的话,因为没接npm,直接下核心文件到本地import就行
      2019-08-29
      回复
    • Nov_52HZ
      Nov_52HZ
      2019-08-30回复Yrobot
      已解决,谢谢
      2019-08-30
      回复
  • HJQ
    HJQ
    2019-03-06

    demo2有待改进,两个手指缩放和旋转过程中有时在矩形里,有时不在,矩形的x和y改变的大小应该要结合长和宽与矩形中点的距离来改变才对

    2019-03-06
    赞同
    回复 1
    • Yrobot
      Yrobot
      2019-03-10

      你好,已经优化完成

      2019-03-10
      2
      回复
  • 周迅迅迅迅迅迅
    周迅迅迅迅迅迅
    2019-03-01

    收藏

    2019-03-01
    赞同
    回复
  • Nicong
    Nicong
    2019-03-01

    提供一下代码片段的链接?

    2019-03-01
    赞同
    回复 1
    • Yrobot
      Yrobot
      2019-03-01


      点击跳转github,就有源码哦

      2019-03-01
      回复
登录 后发表内容