评论

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

分享一个为小程序定制的手势监听事件库-YrobotTouch

YrobotTouch-WXLP

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

跳转到github => 获取源码 ,点亮小星星:https://github.com/Yrobot/YrobotTouch-WXLP

更新时间轴:

  1. 2019年3月10日 09:42:19 - 优化监听和绘制逻辑,动画不卡顿

支持的事件

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

demo展示

  1. demo1:监听 pressMove拖拽 手势
  2. demo2: 监听 pinch缩放 和 rotate旋转 手势 (已优化动画卡顿bug)

使用方法

tips: 整个仓库是一个demo,核心文件是'/utils/YrobotTouch.js',只需下载此js文件即可

*.js

  1. 引入YrobotTouch
  2. 在page的onload生命周期中实例化YrobotTouch

实例化语法:
new YrobotTouch(page实例,实例对象名,option)
实例对象名:影响到wxml引用的方法名,以及page页储存实例的索引
option:包含各个手势事件的出口函数,具体函数及解析如下参考

NOTE:

  1. 多个事件监听触发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.scale代表两个手指缩放的比例
                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);
            }
        });
    },
});  

*.wxml

在view中绑定事件并对应:

touchstart -> 实例对象名.start  
touchmove -> 实例对象名.move  
touchend -> 实例对象名.end    
touchcancel -> 实例对象名.cancel   

NOTE:

  1. 建议使用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

最后一次编辑于  03-10  (未经腾讯允许,不得转载)
点赞 4
收藏
评论

4 个评论

  • 老烟呛
    老烟呛
    08-26

    mpvue应该如何使用呢?

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

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

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

      你好,已经优化完成

      03-10
      回复
  • 鲁迅_姓周
    鲁迅_姓周
    03-01

    收藏

    03-01
    赞同
    回复
  • 戬翀
    戬翀
    03-01

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

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


      点击跳转github,就有源码哦

      03-01
      回复