uni-app 深色主题APP跳转页面闪白

uni-app 深色主题APP跳转页面闪白

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 win11
HBuilderX 正式
HBuilderX版本 4.15
手机系统 Android
手机系统版本 Android 7.0
手机厂商 模拟器
手机机型 夜神
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • uni.navgateTo 跳转就出现了

预期结果：

  • 背景可以设置深色

实际结果：

  • 背景闪白色

bug描述：

夜神模拟器和手机(华为X5)都会跳转闪白,设置了全局背景色也没有

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20240523/3e81022fcc558a0e466c8cbee847b627.jpg)
![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20240523/e82c76ef6d94e806072e3e1ff8534136.jpg)

更多关于uni-app 深色主题APP跳转页面闪白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

这里有文档也有示例：https://uniapp.dcloud.net.cn/tutorial/darkmode.html

更多关于uni-app 深色主题APP跳转页面闪白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不是DarkMode的问题,切换页面的瞬间会闪一下白色,后退页面也会闪一下白色, 我想把背景白色设置成其他颜色,不过现在我发现设置其他过渡动画就可以缓解一下闪白的问题

回复 1***@qq.com: 一样的，需要pages.json里配置页面背景色

在 uni-app 中，深色主题的 App 在页面跳转时出现闪白问题，通常是由于页面切换时默认的背景色为白色导致的。为了解决这个问题，可以尝试以下几种方法：

1. 设置全局背景色

在 App.vue 中设置全局的背景色，确保所有页面的背景色与深色主题一致。

<style>
/* 设置全局背景色 */
body, page {
  background-color: #000000; /* 根据你的深色主题设置背景色 */
}
</style>

2. 设置页面背景色

在每个页面的样式文件中设置背景色，确保页面背景色与深色主题一致。

<style scoped>
/* 设置页面背景色 */
page {
  background-color: #000000; /* 根据你的深色主题设置背景色 */
}
</style>

3. 使用 navigationBarBackgroundColor 设置导航栏背景色

在 pages.json 中设置导航栏的背景色，确保导航栏的背景色与深色主题一致。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#000000" /* 根据你的深色主题设置背景色 */
      }
    }
  ]
}

4. 使用 backgroundColor 设置窗口背景色

在 pages.json 中设置窗口的背景色，确保窗口的背景色与深色主题一致。

{
  "globalStyle": {
    "backgroundColor": "#000000" /* 根据你的深色主题设置背景色 */
  }
}

5. 使用 backgroundColorTop 和 backgroundColorBottom 设置顶部和底部背景色

在 pages.json 中设置顶部和底部的背景色，确保顶部和底部的背景色与深色主题一致。

{
  "globalStyle": {
    "backgroundColorTop": "#000000", /* 根据你的深色主题设置顶部背景色 */
    "backgroundColorBottom": "#000000" /* 根据你的深色主题设置底部背景色 */
  }
}

6. 使用 backgroundColor 设置页面背景色

在 pages.json 中为每个页面设置背景色，确保页面背景色与深色主题一致。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "backgroundColor": "#000000" /* 根据你的深色主题设置背景色 */
      }
    }
  ]
}

7. 使用 backgroundColor 设置整个应用的背景色

在 pages.json 中设置整个应用的背景色，确保所有页面的背景色与深色主题一致。

{
  "globalStyle": {
    "backgroundColor": "#000000" /* 根据你的深色主题设置背景色 */
  }
}

8. 使用 backgroundColor 设置 App.vue 的背景色

在 App.vue 中设置整个应用的背景色，确保所有页面的背景色与深色主题一致。

<style>
/* 设置整个应用的背景色 */
body, page {
  background-color: #000000; /* 根据你的深色主题设置背景色 */
}
</style>
回到顶部