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

本文主要是介绍每日一记：支付宝小程序通过左右滑动屏幕进行切换页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

这篇关于每日一记：支付宝小程序通过左右滑动屏幕进行切换页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---