uni-app使用uni.showLoading导致界面白屏或黑屏
uni-app使用uni.showLoading导致界面白屏或黑屏
操作步骤:
来回登录、退出,必现!!!
视频地址:https://tly-file.oss-cn-shenzhen.aliyuncs.com/test/file/2025/05/19/75145ff3341849d49b345c479464bb50.mp4
预期结果:
界面正常
实际结果:
闪,会遮盖界面上的内容
bug描述:
使用uni.showLoading导致界面白屏或黑屏,多了一层遮罩
图片
更多关于uni-app使用uni.showLoading导致界面白屏或黑屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html
可以发个复现项目吗?帮你看下原因
更多关于uni-app使用uni.showLoading导致界面白屏或黑屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html
回复 t***@obdweb.com: 我用的oppo vivo 测试没出现这个问题 可能只有小米会出现 应该是mask影响到了
同样出现了作者的问题 showload 全屏白屏
1+,荣耀都能复现。。。。。。。
荣耀荣耀荣耀荣耀荣耀荣耀荣耀荣耀 白屏!!!!!!!!!
一加黑屏
评论区里发个可复现demo
回复 t***@obdweb.com: 你是做了什么出现了黑屏呢?我使用一加ace来回登录和推出登录没有出现黑屏的问题
回复 DCloud_UNI_JBB: 我用小米手机,来回登录和退出登录就复现了,出现白色的遮罩层,登录按钮被遮住
这是一个典型的loading遮罩层问题。根据描述和视频,问题可能由以下原因导致:
- 遮罩层z-index过高,覆盖了整个界面
- loading未正确关闭,导致遮罩层残留
- 页面切换时loading状态未重置
建议检查以下代码点:
- 确保每次showLoading都有对应的hideLoading
- 在页面生命周期onHide/onUnload中强制关闭loading
- 检查是否有异步操作未完成就切换页面
临时解决方案:
// 在页面onHide或路由拦截器中添加
uni.hideLoading()
更可靠的实现方式:
let loadingTimer = null
function showSafeLoading() {
uni.showLoading()
loadingTimer = setTimeout(() => {
uni.hideLoading()
}, 10000) // 10秒超时自动关闭
}
function hideSafeLoading() {
if(loadingTimer) {
clearTimeout(loadingTimer)
loadingTimer = null
}
uni.hideLoading()
}