微信小程序判断当前手势滑动方向

(注：文字可能有点多可以直接复制代码到开发者工具上预览)
功能描述：文章适用于微信小程序根据滑动手势方向进行不同操作

主要点：touchstart、touchend

实现思路：
变量解释：startY(开始Y坐标)、startX(开始X坐标)、touchMoveY（结束Y坐标）、touchMoveX（结束X坐标）

1.主要通过touchstart事件获取手势开始时的X、Y坐标，通过touchend获取手势结束时的X、Y坐标。
2.通过三角函数Math.atan计算角度(滑动范围)。
3.以元素左上角为原点，向右、向下增大,通过初始、结束坐标的X、Y轴位置判断
在X轴上(startX > touchMoveX 向左滑动、touchMoveX > startX 向右滑动)
在Y轴上(startY > touchMoveY 向上滑动、touchMoveY > startY 向下滑动)

废话如下：
WXML
给需要判断滑动方向的元素绑定touchstart、touchend事件

<view class="touchView" bindtouchstart="touchstart" bindtouchend="touchend"></view>

WXSS
给元素加个样式大小背景

.touchView {
  height: 500rpx;
  width: 500rpx;
  margin: 0 auto;
  background-color: antiquewhite;
}

JS
在js中给data两个值，开始X、Y坐标

data：{
    startX: 0, //touchStart开始坐标
    startY: 0,
}

touchstart获取初始坐标

  // 计算滑动角度
  touchstart(e) {
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY
    })
  },

通过计算初始坐标、结束坐标的X轴差值、Y轴插值，根据三角函数计算反正切值，返回角度。
(返回的角度是按照正负0° ~ 90°返回，根据象限返回正负第二、第四象限返回正值，第一、第三返回负值)

 //计算滑动角度 start 起点坐标 end 终点坐标
  angle(start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y;
    //返回角度 Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },

touchend滑动结束事件处理
通过计算角度函数angle返回的度数，自己可以选择滑动范围的角度，下面为了方便计算没有直接取角度判断，取了角度绝对值，按照绝对值即可在坐标系中找到判断滑动范围的区域

上下滑动

  //滑结束事件处理
  touchend(e) {
    let {startX,startY} = this.data;
    let slidingRange = 45; //
    let touchMoveX = e.changedTouches[0].clientX;
    let touchMoveY = e.changedTouches[0].clientY;
    let angle = this.angle({
      X: startX,
      Y: startY
    }, {
      X: touchMoveX,
      Y: touchMoveY
    });
    //为了方便计算取绝对值判断
    if (Math.abs(angle) > slidingRange && touchMoveY < startY) {
      // 向上滑动
    };
    if (Math.abs(angle) > slidingRange && touchMoveY > startY ) {
      // 向下滑动
    }
  }

上面的touchend通过初始位置和结束位置的Y轴坐标大小比较：
touchMoveY > startY：结束Y轴大于初始Y轴（向下滑动）
touchMoveY < startY：结束Y轴小于初始Y轴（向上滑动）
判断上下方向，且向上、向下滑动角度范围分别为45° ~ 135°、225° ~ 315°
调整滑动范围判断只需要调整slidingRange（角度）的大小

如图

左右滑动

如果想判断左右手势的滑动，在touchend事件中加入横向坐标touchMoveX，startX的大小判断

   if (Math.abs(angle) < 45 && touchMoveX < startX) {
        // 向左滑动
   };
   if (Math.abs(angle) < 45 && touchMoveX > startX ) {
        // 向右滑动
   }

左右手势的滑动判断通过初始位置和结束位置的X轴坐标大小比较：
touchMoveX > startX：结束X轴大于初始X轴（向右滑动）
touchMoveX < startX：结束X轴小于初始X轴（向左滑动）
判断左右方向、向左、向右滑动角度范围分别在315° ~ 45°、135° ~ 225°
调整滑动范围判断同上只需要调整slidingRange（角度）的大小

如图

以上就是判断向上、向下滑动，向左、向右滑动，如果想在一个元素上同时判断上下左右滑动，只需要计算好角度即可。

第一次写给个面子轻点喷，别骂太狠！