uni-app 【报Bug】vue3 uni.showLoading方法会运行两秒左右自动关闭 未调用hideloading或showToast
uni-app 【报Bug】vue3 uni.showLoading方法会运行两秒左右自动关闭 未调用hideloading或showToast
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win10 21H1 | HBuilderX |
产品分类：uniapp/App
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：win10 21H1
HBuilderX类型：正式
HBuilderX版本号：3.2.16
手机系统：Android
手机系统版本号：Android 11
手机厂商：小米
手机机型：红米K30 PRO
页面类型：vue
vue版本：vue3
打包方式：云端
操作步骤：
1. hbuilderx新建项目-uniapp-默认模板
2. manifest选择vue3版本
3. 在/pages/index/index onload中，写下最简单测试代码
```javascript
setTimeout(() => {
uni.showLoading({
title: '测试'
})
}, 2000)
- 真机连接进行调试
- showloading正常展示，过两秒后自动关闭
预期结果： showloading除非调用hideloading，否则一直展示在页面
实际结果： app平台调用showloading，过两秒自动关闭
bug描述： 创建了一个uniapp空白模板，调用uni.showLoading()，根本没有调用hideloading或showToast，在app平台会过两秒自动关闭，在h5平台正常，用同事的安卓测试，百分百复现
更多关于uni-app 【报Bug】vue3 uni.showLoading方法会运行两秒左右自动关闭 未调用hideloading或showToast的实战教程也可以访问 https://www.itying.com/category-93-b0.html
alpha 3.3.1 已修复
更多关于uni-app 【报Bug】vue3 uni.showLoading方法会运行两秒左右自动关闭 未调用hideloading或showToast的实战教程也可以访问 https://www.itying.com/category-93-b0.html
同问，H5使用也是不到一秒就直接消失了。
跳转到新页面，打开showLoading，预期效果是一直显示，直到数据加载完毕再调用hide，但是现在是打开showLoading 不到一秒自动消失。
回复 DCloud_UNI_LXH: 官网文档上还写着 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。 但是根本不是，showToast hideToast 也能让其消失
回复 DCloud_UNI_LXH: 我现在的场景是 列表数据请求后，点击其中一条跳转详情修改，修改完毕通知列表刷新。修改完毕toast 提示保存成功， 然后延时器通知列表刷新并返回页面。弱网环境下，列表还在请求数据，并没有看到showLoading框，因为showToast 给loading框关闭了。
回复 2***@qq.com: 如果使用了 showLoading ，然后使用 showToase 方法，则会变为之后的 toast，因为你调用了说明你想让用户关注 toast 信息。但是调用 hideToast 是不会让 loading 消失的，而且会在控制台有提示。
回复 DCloud_UNI_LXH: 上面16:02的回复麻烦看下，我是先toast提示，然后延时器里面通知上一页面调用列表接口和返回上一页面，但是接口调用方法里面的showLoading 没显示
uni-app 项目的 loading？运行 hello uni-app 到 ios、android 都没有复现你所说的问题，提供一个可复现的 demo。或者你运行下 hello uni-app 试试看
async loadSchoolData() {
var that = this;
uni.showLoading({
title: ‘加载中’,
icon: ‘loading’,
mask: true
});
var obj = {
“pageNo”: that.fromData.pageNo,
“pageSize”: 6,
“params”: {
“areaCode”: ‘’,
“cityCode”: that.userLocotionCity.id,
“educationCategoryId”: that.classHeading.id,
“provinceCode”: “”,
“schoolName”: that.fromData.name,
‘educationLevelId’: that.fromData.educationLevelId,
}
};
try {
that.statusMore = ‘loading’;
await miniCrgkSchoolList(obj).then(res => {
if (res) {
for (var i in res.records) {
if (res.records[i].signEndTime) {
res.records[i].signEndTime = formattedSignEndTime(res.records[i].signEndTime);
}
}
that.total = res.total;
that.schoolIist = that.schoolIist.concat(res.records);
that.statusMore = ‘more’;
uni.hideLoading(); // 移到 then 中
}
}).catch(error => {
console.error(‘请求失败:’, error);
uni.hideLoading(); // 移到 catch 中
});
} catch (error) {
console.error('请求失败:', error);
uni.hideLoading(); // 同步错误时也隐藏 loading
}
},<br>这是一个已知的 uni-app 在 Vue3 环境下的兼容性问题。在 App 平台，uni.showLoading 在某些情况下会自动关闭，主要原因是底层原生实现与 Vue3 的生命周期或响应式系统存在冲突。
问题分析：
- 平台差异：H5 平台基于浏览器 API 实现，行为稳定；App 平台依赖原生封装，在 Vue3 环境下可能出现异常。
- 自动关闭机制：部分原生实现为防止 loading 长期阻塞，内置了超时自动关闭逻辑（通常约 2 秒），但未在文档中明确说明。
- Vue3 响应式影响：Vue3 的响应式系统可能干扰原生方法的执行时序，导致原生层错误触发关闭。
临时解决方案：
- 使用定时器轮询：通过
setInterval定期重新调用showLoading，强制保持显示状态。let loadingTimer = null function keepLoading() { uni.showLoading({ title: '处理中' }) loadingTimer = setInterval(() => { uni.showLoading({ title: '处理中' }) }, 1500) // 间隔小于 2 秒 } // 结束时调用 clearInterval(loadingTimer) 和 uni.hideLoading()
