小程序监听屏幕滑动事件
2020-10-16 13:41
896 查看
小程序监听屏幕滑动事件
功能设计背景
- 小程序页面点击事件的坐标系是以左下角为原点的直角坐标系。
- 微信小程序提供
bindtouchstart
和bindtouchend
接口用于监听触点的变化。
功能实现
1.在你需要监听的块外增加监听遮罩层,包含待监听块在内
<view bindtouchstart="touchStart" bindtouchend="touchEnd"> <!--待监听功能模块--> </view>
2.根据触点的起始位置和终止位置计算滑动方向(在data中配置
touchx和
touchy数值)
touchStart(e) { console.log(e) var that = this; that.setData({ touchx: e.changedTouches[0].clientX, touchy: e.changedTouches[0].clientY }) }, touchEnd(e) { console.log(e) var that = this; let x = e.changedTouches[0].clientX; let y = e.changedTouches[0].clientY; let turn = ""; if (x - that.data.touchx > 50 && Math.abs(y - that.data.touchy) < 50) { //右滑 turn = "right"; } else if (x - that.data.touchx < -50 && Math.abs(y - that.data.touchy) < 50) { //左滑 turn = "left"; } if(y - that.data.touchy > 50 && Math.abs(x - that.data.touchx) < 50){ //下滑 turn = "down"; }else if(y - that.data.touchy < -50 && Math.abs(x - that.data.touchx) < 50){ //上滑 turn="up"; } //根据方向进行操作 if(turn == 'down'){ //下滑触发操作 } },
参考
相关文章推荐
- 如何监听小程序中的手势事件(缩放、双击、长按、滑动、拖拽)
- Android监听屏幕的滑动事件
- android 屏幕监听滑动事件
- 监听手指左右滑动屏幕的事件,封装好了一个类
- 利用监听事件做一个判断是在x方向还有y方向上面的判断,判断在屏幕上滑动的趋势
- 封装的android监听手指左右滑动屏幕的事件类分享
- 监听手指左右滑动屏幕的事件,封装好了一个类
- JavaScript 监听屏幕滑动事件的JS
- 监听手指左右滑动屏幕的事件,封装好了一个类
- JavaScript 监听屏幕滑动事件的JS
- 如何通过GestureDetector实现屏幕事件监听(滑动切换Layout) (转)
- 通过ImageView的点击监听事件来滑动ScrollView的滚动条,进而改变屏幕显示内容
- nodejs --eventemitter3小程序监听事件使用
- html屏幕旋转事件监听
- 监听获取程序退出事件(Linux、Windows、Java、C++)
- -[UIKeyboardTaskQueue waitUntilAllTasksAreFinished] may only be called from the main thread.【创建键盘监听事件,然后操作键盘(弹出、收回),结果在运行程序时出现如下错误(如有知道解决办法的朋友请留言探讨!)】
- js实现滑动触屏事件监听的方法
- 【ScrollView】Android ScrollView监听滑动事件
- 推箱子游戏开发(二) 键盘事件监听 角色在屏幕上移动
- RecyclerView实现滑动和删除事件的监听方法