移动端滑动方向判断
Posted lonfate
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端滑动方向判断相关的知识，希望对你有一定的参考价值。
移动端滑动方向判断，主要是判断利用x,y轴方向的增量，哪个轴增的快，就是哪个方向。
在touchstart中获取初始点，startX, startY;
在touchmove中获取移动点，moveX, moveY
计算两者的差 deltaX = moveX - startX; deltaY = moveY - startY;
之后累加deltaX和deltaY：
distX += Math.abs(deltaX)
distY += Math.abs(deltaY)
if (distX > distY && deltaX > 0) {
console.log(‘右滑‘)
}
if (distX > distY && deltaX < 0) {
console.log(‘左滑‘)
}
if (distX < distY && deltaY < 0) {
console.log(‘上滑‘)
}
if (distX < distY && deltaY > 0) {
console.log(‘下滑‘)
}
思路就是这样，代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>滑动方向判断</title> <style> #box{ width: 100%; height: 500px; background: orange; } </style> </head> <body> <div id="box"></div> <script> let startX,startY,moveX,moveY,deltaX,deltaY; let distX = 0 let distY = 0 let box = document.getElementById(‘box‘) box.addEventListener(‘touchstart‘, function(e) { let point = e.touches ? e.touches[0] : e startX = point.pageX startY = point.pageY distX = 0 distY = 0 }) box.addEventListener(‘touchmove‘, function(e) { let point = e.touches ? e.touches[0] : e moveX = point.pageX moveY = point.pageY deltaX = moveX - startX deltaY = moveY - startY distX += Math.abs(deltaX) distY += Math.abs(deltaY) console.log(distX, distY) if (distX > distY && deltaX > 0) { console.log(‘右滑‘) } if (distX > distY && deltaX < 0) { console.log(‘左滑‘) } if (distX < distY && deltaY < 0) { console.log(‘上滑‘) } if (distX < distY && deltaY > 0) { console.log(‘下滑‘) } }) </script> </body> </html>
以上是关于移动端滑动方向判断的主要内容，如果未能解决你的问题，请参考以下文章