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导致界面白屏或黑屏,多了一层遮罩

图片

image image


更多关于uni-app使用uni.showLoading导致界面白屏或黑屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

可以发个复现项目吗?帮你看下原因

更多关于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遮罩层问题。根据描述和视频,问题可能由以下原因导致:

  1. 遮罩层z-index过高,覆盖了整个界面
  2. loading未正确关闭,导致遮罩层残留
  3. 页面切换时loading状态未重置

建议检查以下代码点:

  1. 确保每次showLoading都有对应的hideLoading
  2. 在页面生命周期onHide/onUnload中强制关闭loading
  3. 检查是否有异步操作未完成就切换页面

临时解决方案:

// 在页面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()
}
回到顶部