H5中判断手势滑动方向

touchstart、touchend事件判断手势滑动方向

//data中进行定义 startX：null, startY:null,//mounted生命周期中进行监听 document.addEventListener("touchstart",(ev) => {this.startX = ev.touches[0].pageX;this.startY = ev.touches[0].pageY;console.log(this.startX, this.startY, "start");},false ); document.addEventListener("touchend",(ev) => {var endX, endY;endX = ev.changedTouches[0].pageX;endY = ev.changedTouches[0].pageY;var dy = endY - this.startY;var dx = endX - this.startX;console.log(dy, dx, "dy dx");var result = 0;//如果滑动距离太短if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {return result;}var angle = (Math.atan2(dy, dx) * 180) / Math.PI;console.log(angle, 5555555);if (angle >= -45 && angle < 45) {result = 4;} else if (angle >= 45 && angle < 135) {result = 1;} else if (angle >= -135 && angle < -45) {result = 2;} else if ((angle >= 135 && angle <= 180) ||(angle >= -180 && angle < -135)) {result = 3;}switch (result) {case 0:console.log("没滑动");break;case 2:console.log("向上");break;case 1:console.log("向下");break;case 3:console.log("向左");break;case 4:console.log("向右");break;default:}},false );

总结

以上是生活随笔为你收集整理的H5中判断手势滑动方向的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。