微信小程序用JS实现页面左右滑动切换页面

微信小程序只提供下拉触底和上拉刷新两个功能API要做左右滑动得自己写JS。

思路大概是

在需要滑动操作的容器绑定touchstart，touchmove，touchend三个事件之后在事件处理函数进行相应的判断处理。此处以左右滑动切换tabber页面为例。
首先在需要做滑动处理的容器进行绑定事件

<view touchstart="touchStart" touchmove="touchMove" touchend="touchEnd">此处为需要滑动处理的页面。。。。。。。。view>

之后在JS文件编写相应的事件处理函数，思路为：设置两个全局变量startDot，touchDot分别存放触屏开始点和正在触屏的点，用于判断滑动的X，Y坐标注意坐标原点位于左上角，不然会左右滑动相反。再设置time，number两个变量用于保存触屏时间和定时器的ID。先绑数据然后触屏相应的点输出控制台看坐标值再做相应的距离判断，在事件处理函数touchStart中读取触屏开始坐标，并打开定时器计时。在事件处理函数touchMove中判断移动的距离和时间是否符合要求符合则做相应的处理（为了保证滑动一次只处理一次需在处理后重置时间time变量和关闭定时器number）。在touchEnd事件处理函数中重置time和关闭定时器number，确保在不符合滑动距离和时间要求时从头计时。

代码

//触屏开始点坐标
var startDot = {
  X: 0,
  Y: 0
};
//触屏到点坐标
var touchDot = {
  X: 0,
  Y: 0
};
var time = 0;  //触屏时间
var number;     //定时器ID
Page({
/**
   * 触屏开始计时和获取坐标
   */
  touchstart: function (event) {
    startDot.X = event.touches[0].pageX;
    startDot.Y = event.touches[0].pageY;
    number = setInterval(function () { time++; }, 100);
  },
  /**
   * 判断滑动距离和时间是否需要切换页面
   */
  touchmove: function (event) {
    touchDot.X = event.touches[0].pageX;
    touchDot.Y = event.touches[0].pageY;
    //向左滑处理
    if ((startDot.X - touchDot.X) > 200 && (startDot.Y - touchDot.Y) < 150 && time < 5 && time > 0.1) {
      wx.switchTab({
        url: ''
      });
      clearInterval(number);
      time = 0;
    }
    //向右滑处理
    if ((touchDot.X - startDot.X) > 200 && (touchDot.Y - startDot.Y) < 150 && time < 5 && time > 0.1) {
      wx.switchTab({
        url: ''
      });
      clearInterval(number);
      time = 0;
    }
  },
  /**
   * 结束触屏重置计时
   */
  touchend: function (event) {
    clearInterval(number);
    time = 0;
  },
})

通过此方式切换页面，页面是直接跳转的没有，直接跳出来感觉干巴巴的，本来想加点动画不过项目不需要太过于繁琐就没写，应该是可以创建动画做到像微信那种左右切换的效果。
此思路可以做其他处理，比如像QQ的左滑出其他按键这种功能做相应的事件处理即可

用定时器时，一定做好关闭处理，不然计时已经进入其他页面定时器到时间任然会生效，比如做定时切换至某页面时如果设置其他方式切换比如点击切换一定要在切换操作同时关闭定时器，不然定时器到时间还是会掉转到该页面，如果此时你已经进入其他页面可能会被拉回去。。。。。。。