mq30 / wx-touch-event

微信小程序 手势事件

##WxTouchEvent 微信小程序手势事件库

由于微信小程序只能够支持 tap,longtap,touchstart,touchmove,touchcancel,touchend时间，对于比较复杂的事件只能自己实现 因此自己对 alloyFinger库进行了改造，开发了时候微信小程序手势事件库WxTouchEvent,使用 ES 6进行编写,手势库支持以下事件

• touchStart
• touchMove
• touchEnd
• touchCancel
• multipointStart
• multipointEnd
• tap
• doubleTap
• longTap
• singleTap
• rotate
• pinch
• pressMove
• swipe

###使用 由于和微信小程序强绑定，因此需要在元素上面绑定好所有的事件，书写比较麻烦，因此建议对于原生支持的使用原生去解决， 只有当需要 pinch，rotate,swipe 等特殊事件才使用这个事件库实现

安装 npm i wx-touch-event --save , 或者直接从 git 库 checkout 出来

绑定方法

*.wxml

在wxml中对需要监听时间的元素绑定 touchstart、touchmove、touchend、touchcancel四个事件 页面书写成

    <view class="info-list" 
          bindtouchstart="touchStart"
          bindtouchmove="touchMove"
          bindtouchend="touchEnd"
          bindtouchcancel="touchCancel"
        >
        
    </view>

*.js

在js逻辑层需要实例化WxTouchEvent, 实例中有start、move、end、cancel对应\*.wxml绑定的bindtouchstart,bindtouchmove,bindtouchend,bindtouchcancel,需要将事件的回调函数一一对应, 书写成:

import WxTouchEvent from "wx-touch-event";

let infoListTouchEvent = new WxTouchEvent();//在 Page外实例化函数，可以直接复制给 Page 中的回调函数
Page({
    onLoad: function() {
        this.infoListTouchEvent = infoListTouchEvent;
        this.infoListTouchEvent.bind({//初始化后绑定事件
            swipe: function(e) {
                console.log(e);
            },
            doubleTap: function(e) {
                console.log(e);
            },
            tap: function(e) {
                console.log(e);
            }.bind(this),
            longTap: function(e) {
                console.log(e);
            },
            rotate: function(e) {
                console.log(e)
            }.bind(this),
            pinch: function(e) {
                console.log(e);
            }

        })
    },
    touchStart: infoListTouchEvent.start.bind(infoListTouchEvent),
    touchMove: infoListTouchEvent.move.bind(infoListTouchEvent),
    touchEnd: infoListTouchEvent.end.bind(infoListTouchEvent),
    touchCancel: infoListTouchEvent.cancel.bind(infoListTouchEvent),

});