每日一記：支付寶小程序通過左右滑動屏幕進行切換頁面

目前很多手機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方法結束*/

說明：上述方法的邏輯簡單易懂，詳細大家都可以理解，如果有疑惑地，歡迎留意討論。