小程序模板网

WxTouchEvent 微信小程序手势事件库

发布时间:2018-04-18 09:50 所属栏目:小程序开发教程
作者:斑驳光影,来自授权地址

由于微信小程序只能够支持 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),

});
 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23622.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询