php 滚动条监听,小程序监听屏幕滑动事件

小程序监听屏幕滑动事件

功能设计背景

小程序页面点击事件的坐标系是以左下角为原点的直角坐标系。

微信小程序提供bindtouchstart和bindtouchend接口用于监听触点的变化。

功能实现

1.在你需要监听的块外增加监听遮罩层，包含待监听块在内

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'){

//下滑触发操作

}

},

总结

以上是编程之家为你收集整理的小程序监听屏幕滑动事件全部内容，希望文章能够帮你解决小程序监听屏幕滑动事件所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。