原生小程序左右滑动切换页面事件

微信小程序的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。
这三个事件最重要的属性是startX和startY，表示X，Y坐标。
touchstart在触摸开始时触发事件;
touchend在触摸结束时触发事件;

1：在wxml文件中绑定事件

<view class='header_content' bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="tochend">
{{内容}}
 </view>

2：在js文件中处理左右滑动逻辑

data: {
    //滑动坐标
    startX: 0,
    startY: 0,
    direction: null, //活动方向 L 左滑  R 右滑

  },
  
   //开始滑动
   touchstart: function (e) {
     this.setData({
       startX: e.changedTouches[0].clientX,
       startY: e.changedTouches[0].clientY
     })
   },

   //滑动中判断滑动方向
   touchmove: function (e) {
     let startX = this.data.startX // 开始x坐标
     let startY = this.data.startY // 开始y坐标
     let touchMoveX = e.changedTouches[0].clientX // 活动变化坐标
     let touchMoveY = e.changedTouches[0].clientY //滑动变化坐标
     let angle = this.angle({
       X: startX,
       Y: startY
     }, {
       X: touchMoveX,
       Y: touchMoveY
     })
     //滑动角度超过45retrun
     console.log(Math.abs(angle),"Math.abs(angle)")
     if (Math.abs(angle) > 45) return
     if (touchMoveX > startX) { //右滑
       this.setData({
         direction: 'R'
       })
     } else {
       this.setData({ //左滑
         direction: 'L'
       })
     }
   },

   // 滑动角度限制
   angle: function (start, end) {
     var _X = end.X - start.X,
       _Y = end.Y - start.Y
     //返回角度 / Math,atan()返回数据的反正切值
     return 360 * Math.atan(_Y / _X) / (2 * Math.PI)
   },

  // 滑动结束
   tochend: function (e) {
     let that = this
     if (this.data.direction == 'R') { // 左滑相当于上一页
      console.log("左滑")//这里大家可以根据需求调用接口
     } else if (this.data.direction == 'L') { //右滑相当于下一页
      console.log("右滑")//这里大家可以根据需求调用接口
     } else { // 相当于滑动不成立,清空driection
       this.setData({
         direction: ''
       })
     }
   },

以上便是原生小程序左右滑动切换页面事件的参考案例,请结合具体实际修改后使用。