vue3移动端监听手势滑动

思路
1.利用document.getElementById(‘id’).addEventListeneraddEventListener监听获取手指接触屏幕开始到结束后的坐标
2.计算手势触摸到释放的角度
3.计算手势滑动的距离
综合这几点考虑，我们就知道大概怎么写了

首先创建一个div，id为touchBox

<template>
    <div id="touchBox">
  </div>
</template>

1.在Mounted里计算获取手指坐标

onMounted(() => {

  //手指接触屏幕
  document.getElementById('touchBox').addEventListener(
    'touchstart',
    function (e) {
      state.startx = `${e.touches[0].pageX}`;
      state.starty = `${e.touches[0].pageY}`;
      console.log(state.startx, state.starty)
      e.stopPropagation();
    },
    false
  );

  document.getElementById('touchBox').addEventListener(
    'touchend',
    function (e) {
      let endx, endy;
      endx = e.changedTouches[0].pageX;
      endy = e.changedTouches[0].pageY;
      let direction = getDirection(state.startx, state.starty, endx, endy);
      e.stopPropagation();
      console.log('direction', direction)
    },
    false
  );
});

2.计算手势触摸到释放的角度

//获得角度
const getAngle = (angx, angy) => {
  return (Math.atan2(angy, angx) * 180) / Math.PI;
};
 let angle = getAngle(angx, angy);

3.计算手势滑动的距离

const getDirection = (startx, starty, endx, endy) => {
  let angx = endx - startx;
  let angy = endy - starty;
  let result = 0;

  //如果滑动距离太短
  if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
    console.log('==>点击了一下');
    return result;
  }
  let angle = getAngle(angx, angy);
  /  console.log('角度', angle);

  console.log('角度', num);
  if (angle < 0 && -90 < angle) {
    
    console.log('往【右上】滑动1', num);
  } else if (angle < -90 && -180 < angle) {
   
    console.log('往【左上】滑动2', num);
  } else if (angle < 90 && 0 < angle) {
    
     console.log('往【右下】滑动0', num);
  } else {
    console.log('往【左下】滑动0', num);
  }
  return result;
};
这样就可以了，如果大家还有更好的实现思路，也可以在评论区留言