【报Bug】tabbar背景颜色影响了非tabbar页面的底部安全区域颜色

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 64 位操作系统

HBuilderX类型：正式

HBuilderX版本号： 4.85

手机系统： Android

手机系统版本号： Android 15

手机厂商：小米

手机机型： xiaomi 13

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

操作步骤：

创建一个uni-app项目，在pages.json中如下配置
"tabBar": {
"borderStyle": "white",
"backgroundColor": "#ffffff",
}

预期结果：

tabbar的背景颜色不要影响非tabbar页面

实际结果：

tabbar的背景颜色影响了非tabbar页面

bug描述：

tabbar背景颜色影响了非tabbar页面的底部安全区域颜色，tabbar的backgroundColor设置的是#fff，我有一个全屏深色的页面，这个深色页面的底部安全区域是白色的，我该如何把他改成深色？

2025-12-03 17:22 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

这个问题是由于uni-app中tabBar的backgroundColor设置影响了整个应用的底部安全区域样式。针对非tabbar页面底部安全区域被染白的问题，解决方案如下：

在pages.json中为深色页面单独配置app-plus样式：

"pages": [  
  {  
    "path": "pages/deep/deep",  
    "style": {  
      "app-plus": {  
        "background": "#000000",  // 设置页面原生背景色  
        "animationAlphaBGColor": "#000000"  // 解决Android popin动画背景色问题  
      }  
    }  
  }  
]

关键点说明：

background属性可强制设置页面原生背景色，覆盖tabBar的全局影响
animationAlphaBGColor专门解决Android页面切换时底部安全区域的半透明背景色问题

参考知识库文档：

另外，知识库提到"nvue页面不存在此问题"，如果条件允许也可考虑将深色页面改为nvue实现。当前HBuilderX 4.85正式版已支持这些配置项。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

【报Bug】tabbar背景颜色影响了非tabbar页面的底部安全区域颜色

操作步骤：

创建一个uni-app项目，在pages.json中如下配置
"tabBar": {
"borderStyle": "white",
"backgroundColor": "#ffffff",
}

预期结果：

tabbar的背景颜色不要影响非tabbar页面

实际结果：

tabbar的背景颜色影响了非tabbar页面

bug描述：

1 个回复

公告

相关问题

【报Bug】tabbar背景颜色影响了非tabbar页面的底部安全区域颜色

操作步骤： 创建一个uni-app项目，在pages.json中如下配置 "tabBar": { "borderStyle": "white", "backgroundColor": "#ffffff", }

预期结果： tabbar的背景颜色不要影响非tabbar页面

实际结果： tabbar的背景颜色影响了非tabbar页面

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

创建一个uni-app项目，在pages.json中如下配置
"tabBar": {
"borderStyle": "white",
"backgroundColor": "#ffffff",
}

预期结果：

tabbar的背景颜色不要影响非tabbar页面

实际结果：

tabbar的背景颜色影响了非tabbar页面