每日一记：支付宝小程序通过左右滑动屏幕进行切换页面

目前很多手机app都支持左右滑动屏幕进行切换页面，提升了用户体验，有其是大屏手机，要点击左上角的返回按键确实有点辛苦！

这里以支付宝小程序为例，演示如何在小程序中实现上述效果。

废话不多说，直接上干货：

1、在.axml文件的最外层视图容器view（你也可以选择自己合适的部位）中添加开始和结束事件

<view class="page-todos" onTouchStart="TouchStart" onTouchEnd="TouchEnd">
    <view>试试左右滑动切换更方便哦！</view>
</view>

注意：不同小程序中的事件名称不一定相同，请自行查阅小程序开发文档。

2、在.js文件中添加对应的事件动作

  /**TouchStart方法开始*/
  TouchStart(e) {
    this.setData({
      "touch.x": e.changedTouches[0].clientX,
      "touch.y": e.changedTouches[0].clientY
    });
  },
  /**TouchStart方法结束*/

  /**TouchEnd方法开始*/
  TouchEnd(e) {
    let x = e.changedTouches[0].clientX;
    let y = e.changedTouches[0].clientY;
    let turn = this.getTouchData(x, y, this.data.touch.x, this.data.touch.y);
    if(turn == "right"){
      //返回上一个页面
      my.navigateBack();
    }else if(turn == "left"){
      //跳转到指定页面
      my.navigateTo({ url: '../add-todo/add-todo' });
    }else{

    }
  },
  /**TouchEnd方法结束*/

  /**getTouchData方法开始*/
  /***
   * 判断用户滑动
   * 左滑还是右滑
   */
  getTouchData(endX, endY, startX, startY){
    let turn = "";
    if (endX - startX > 50 && Math.abs(endY - startY) < 50) {      //右滑
      turn = "right";
    } else if (endX - startX < -50 && Math.abs(endY - startY) < 50) {   //左滑
      turn = "left";
    }
    return turn;
  },
  /**getTouchData方法结束*/

说明：上述方法的逻辑简单易懂，详细大家都可以理解，如果有疑惑地，欢迎留意讨论。