uni-app showToast showLoading 闪屏 黑屏

uni-app showToast showLoading 闪屏 黑屏

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

示例代码：

uni.showToast({
mask: true,
title: this.lang['设备退出中'],
duration:2000,
icon: 'loading'
});

操作步骤：

uni.showToast({
mask: true,
title: this.lang['设备退出中'],
duration:2000,
icon: 'loading'
});

预期结果：

正常loading

实际结果：

正常loading

bug描述：

uni.showToast的icon设置为loading时， 会出现一闪一闪，极个别设备会出现黑屏（荣耀） uni.showLoading也一样，


更多关于uni-app showToast showLoading 闪屏 黑屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

提供一下可以复现问题的示例

更多关于uni-app showToast showLoading 闪屏 黑屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


a页面跳到b页面 ，去执行uni.showToast({ mask: true, title: this.lang[‘设备退出中’], duration:2000, icon: ‘loading’ });就行了

我的项目比较大，不适合发出来。，上述就会复现的

针对uni-app中showToast和showLoading出现闪屏或黑屏的问题，这通常与底层渲染机制和设备兼容性有关。以下是关键原因和解决方案：

主要原因：

  1. CSS动画冲突：部分Android设备对CSS动画支持不完善，导致图标渲染异常。
  2. 渲染层级问题：遮罩层（mask）与图标渲染时序不同步。
  3. 设备性能差异：低端设备GPU渲染能力不足。

解决方案：

  1. 调整图标类型：

    • 避免使用icon: 'loading'，改用success或none。
    • 若需加载动画，可自定义UI组件替代。

  2. 优化遮罩层控制：

    // 移除mask或设置为false测试
uni.showToast({
  mask: false, // 改为false
  title: '设备退出中',
  icon: 'none' // 替换图标类型
});

  3. 使用showLoading的替代方案：

    // 改用自定义加载组件
uni.showLoading({
  title: '加载中',
  mask: true // 如仍有问题可关闭
});
// 注意：及时调用hideLoading避免持续遮挡

  4. 针对荣耀设备：

    • 检查系统WebView版本，更新至最新。
    • 在pages.json中全局配置透明背景：
      "globalStyle": {
  "backgroundColor": "@backgroundColor"
}
回到顶部