您的位置:首页 > 移动开发 > 微信开发

小程序监听屏幕滑动事件

2020-10-16 13:41 896 查看

小程序监听屏幕滑动事件

功能设计背景

  1. 小程序页面点击事件的坐标系是以左下角为原点的直角坐标系。
  2. 微信小程序提供
    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'){
//下滑触发操作
}
},

参考

校园小程序 https://gitee.com/Kindear/yamako_procedure

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: