如何监听小程序中的手势事件(缩放、双击、长按、滑动、拖拽)
2020-02-01 21:35
417 查看
分享一个为小程序定制的手势监听事件库-YrobotTouch
原文连接:https://developers.weixin.qq.com/community/develop/article/doc/000006d3814318eff728a86b65b413
YrobotTouch-WXLP
YrobotTouch,一个方便、轻量的 小程序 手势事件监听库
事件库部分逻辑参考
alloyFinger,在此做出声明和感谢
支持的事件
- 支持pinch缩放
- 支持rotate旋转
- 支持pressMove拖拽
- 支持doubleTap双击
- 支持swipe滑动
- 支持longTap长按
- 支持tap按
- 支持singleTap单击
使用方法
tips: 整个仓库是一个demo,核心文件是'/utils/YrobotTouch.js',只需下载此js文件即可
*.js
- 引入YrobotTouch
- 在page的onload生命周期中实例化YrobotTouch
实例化语法:
new YrobotTouch(page实例,实例对象名,option)
实例对象名:影响到wxml引用的方法名,以及page页储存实例的索引
option:包含各个手势事件的出口函数,具体函数及解析如下参考
参考:
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
参考:(上例js中事例对象名为’touch1’)
<view class="box" bindtouchstart="touch1.start" bindtouchmove="touch1.move" bindtouchend="touch1.end" bindtouchcancel="touch1.cancel"> <view id="target"></view> </view>
以上简单两步即可使用YrobotTouch手势库
转载于:https://www.cnblogs.com/Webzhoushifa/p/10458192.html
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 微信小程序开发之拖拽 image 触摸事件监听
- 微信小程序 实现拖拽事件监听实例详解
- 微信小程序实现拖拽 image 触摸事件监听的实例
- GestureDetector手势监听不到滑动事件(onFling,onScroll)
- 微信小程序 监听手势滑动切换页面
- 微信小程序开发之拖拽 image 触摸事件监听
- 如何通过GestureDetector实现屏幕事件监听(滑动切换Layout) (转)
- ScrollView快速滑动或拖拽停止事件监听
- 如何在服务程序中监听硬件事件
- 如何在ScrollView滑动的瞬间禁用拖拽手势
- arcgis for ios 如何监听地图滑动结束和缩放结束
- [置顶] viewPager+photoView实现图片轮播和手势缩放功能 支持手势缩放的imageView 如何实现相册左右滑动和手势缩放 如何让图片自适应控件大小 photoView如何使用(上)
- 微信小程序开发之拖拽 image 触摸事件监听
- pan手势监听对view的上下左右滑动,利用关联对象在block中触发view的点击事件(附手势大全)
- zepto.js滑动事件,jquery获得url参数,手机端双击图片和手势放大
- 小程序的拖拽、缩放和旋转手势 滚动置顶
- 猫猫学IOS(三十六)UI之手势事件旋转_缩放_拖拽
- 手势状态控制图片的缩放和移动(双击放大,俩指滑动图片缩放)
- 如何监听listview的滚动事件——获取listview有效滑动的距离
- 猫猫学IOS(三十六)UI之手势事件旋转_缩放_拖拽