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

本文讲述了在微信小程序中使用showLoading显示加载弹窗时,如何有效拦截屏幕滑动事件,强调查阅官方文档的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

### 实现 UniApp 中微信小程序加载弹窗效果 为了实现在 UniApp 开发的微信小程序中展示加载弹窗的效果,可以利用 `uni.showLoading` 和 `uni.hideLoading` API 来控制加载提示框的显示与隐藏。这些API提供了简单的方法来管理页面上的加载状态。 当应用启动或执行耗时操作时调用 `uni.showLoading()` 方法,在完成相应处理之后再通过 `uni.hideLoading()` 隐藏该对话框[^1]。 下面是一个简单的例子: ```javascript // 显示加载动画 uni.showLoading({ title: '正在加载', }); setTimeout(() => { // 假设这是异步请求或其他耗时任务完成后要做的工作 uni.hideLoading(); }, 2000); // 模拟两秒后的关闭动作 ``` 对于更复杂的场景,比如首次打开应用程序时向用户呈现隐私政策,则可以在页面初始化阶段设置标志位并结合条件渲染技术来决定何时以及如何展现特定的内容[^2]。 如果希望创建自定义样式或者交互逻辑更强的模态窗口,还可以考虑使用 `<view>` 组件构建自己的遮罩层,并配合 CSS 动画达到理想中的视觉体验。 #### 结合实际案例说明 假设有一个名为 `index.vue` 的首页文件,其中包含了如下结构用于实现初次访问时自动弹出隐私协议的功能: ```html <template> <view class="container"> <!-- 主体内容 --> <!-- 自定义弹窗组件,默认不显示 --> <my-modal v-if="showPrivacyPolicy"></my-modal> </view> </template> <script> export default { data() { return { showPrivacyPolicy: false, scrollWidth: uni.getSystemInfoSync().windowWidth, scrollHeight: uni.getSystemInfoSync().windowHeight, }; }, onLoad() { this.checkFirstVisit(); // 判断是否为第一次进入程序 }, methods: { checkFirstVisit() { let isFirstTime = !uni.getStorageSync('hasVisited'); if (isFirstTime) { this.showPrivacyPolicy = true; // 设置已访问标记 uni.setStorageSync('hasVisited', true); } } } } </script> ``` 上述代码片段展示了如何基于用户的访问记录判断是否应该显示隐私条款,并且仅在满足一定条件下才会触发此行为。同时,也体现了获取设备屏幕尺寸的方式以便更好地适配不同终端下的布局需求。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值