微信小程序显示加载弹窗(showLoading)的过程中拦截屏幕滑动事件

        这篇文章对于熟悉小程序开发的人或者说熟悉开发文档的人来说简直就是鸡肋，因为没有技术性可言。不过，对于像我这种入门者而且没有多看文档的人来说，多少会有些用，思考再三还是写篇文章记录下好了，没有恶意刷存在感[笑哭.gif]。

        场景是这样的：我的页面中有多条数据需要分页显示，所以就在页面回调方法onReachBottom中处理"上拉加载更多"的逻辑，加载过程中使用wx.showLoading来给用户提示，加载完成以后自动隐藏弹窗，也就是wx.hideLoading。测试中发现，在向服务器请求新数据的过程中，加载弹窗(showLoading)还在显示的时候，用户可以任意的滑动页面，导致在onReachBottom方法里通过给表示页码的字段page加1的方式来请求下一页数据的逻辑混乱。举个例子，当我第一次上拉页面去加载第二页数据时，由于网络请求会有些延迟，所以会在成功前一直显示加载弹窗，如图1.

图1.

这个时候，我不断来回上拉<-->下拉页面，就会不断的触发onReachBottom方法，导致上述的page字段不断的加1，而此时第二页还没请求到呢，但page字段的值可能就已经是3，4，5...了，所以，当第二页数据请求到以后，再去上拉页面打算加载第三页的时候，其实是请求了第四，第五......页的数据。这个问题发现以后我首先想的是像android触摸事件那样在这个加载过程中拦截滑动事件造成阻塞，然后就在网上搜索拦截的方法，但找了半天没找到，在.wxml中有一些拦截事件，但我这是在js文件中的逻辑...然后尝试添加flag的方式，也就是设置个变量flag，请求的过程中使flag=false,如果遇到false就不让onReachBottom方法里的逻辑触发，请求成功以后修改flag的值为true。这种方式一定程度上可行，但还是有些同步的问题导致不严谨。后来请教了其他人，原来只需要一个简单配置就搞定：在wx.showLoading()的对象中将字段mask的值设为true就行了[捂脸.png],见图2.

图2.

然后又去看了下官方文档，见到如下说法(图3):

图3.

也就是说，如果要防止在弹出加载弹窗的时候背后的页面响应触摸事件，那么就把mask设置为true就行了，默认是false。

注意：在开发工具的模拟器上测试是不行的，需要在真机上测试才能看到效果。

教训就是，以后要多看看官方文档[笑哭.gif]。