移动端滑动方向判断

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>

 













以上是关于移动端滑动方向判断的主要内容,如果未能解决你的问题,请参考以下文章

移动端滑动方向判断

移动端判断用户滑动方向

PC和移动端判断鼠标(手指)滑动方向(touch方向)

js判断元素滑动方向(上下左右)移动端

《移动端浏览器Touch事件判断手指滑动方向方法》

移动端判断触摸的方向