摘要：微信小程序手势事件库由于微信小程序只能够支持时间，对于比较复杂的事件只能自己实现因此自己对库进行了改造，开发了时候微信小程序手势事件库使用进行编写手势库支持以下事件仓库地址点我点我使用由于和微信小程序强绑定，因此需要在元素上面绑定好所有的事
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
git仓库地址:点我点我
使用由于和微信小程序强绑定，因此需要在元素上面绑定好所有的事件，书写比较麻烦，因此建议对于原生支持的使用原生去解决，
只有当需要 pinch，rotate,swipe 等特殊事件才使用这个事件库实现
安装 npm i wx-touch-event --save , 或者直接从 git 库 checkout 出来
绑定方法
*.wxml在wxml中对需要监听时间的元素绑定 touchstart、touchmove、touchend、touchcancel四个事件
页面书写成
*.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),
});
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82778.html
摘要：自制微信小程序通讯起因现在微信小程序开发基本会使用到组件的开发。随着组件的不断增加，使得组件之间的通讯越发频繁。这个能使得我们在组件和页面之间随意通讯，您只需要按照规范注册，使用即可，可以帮你建立任意两个组件之间的通信通道。 自制微信小程序通讯JS 起因 现在微信小程序开发基本会使用到组件的开发。随着组件的不断增加，使得组件之间的通讯越发频繁。然后，微信小程序中组件之前通讯必须通过父子...
摘要：学习微信小程序一段时间，自己仿照京东小程序做了几个页面，分享给大家看看源码地址，希望能帮助到有兴趣的同学喜欢可以加星哦其中几个效果图如下介绍一下事先准备的事情前期部署项目命名规范用驼峰法命名中命名用分隔，用接口中数据用分隔文件文件夹命名 学习微信小程序一段时间，自己仿照京东小程序做了几个demo页面，分享给大家看看 源码地址，希望能帮助到有兴趣的同学https://github.com...
摘要：学习微信小程序一段时间，自己仿照京东小程序做了几个页面，分享给大家看看源码地址，希望能帮助到有兴趣的同学喜欢可以加星哦其中几个效果图如下介绍一下事先准备的事情前期部署项目命名规范用驼峰法命名中命名用分隔，用接口中数据用分隔文件文件夹命名 学习微信小程序一段时间，自己仿照京东小程序做了几个demo页面，分享给大家看看 源码地址，希望能帮助到有兴趣的同学https://github.com...
阅读 1399·2021-11-09 09:45
阅读 1761·2021-11-04 16:09
阅读 1431·2021-10-14 09:43
阅读 1769·2021-09-22 15:24
阅读 1539·2021-09-07 10:06
阅读 1578·2019-08-30 14:15
阅读 967·2019-08-30 12:56
阅读 1546·2019-08-29 17:22
