uni-app android端tabbar页面中pages.json配置的background未生效

操作步骤：

android端分别在tabbar页面跳转与非tabbar页面跳转

预期结果：

不管是tabbar页面还是非tabbar页面跳转，跳转时pages.json中所配置的background与backgroundColor属性均生效

实际结果：

在tabbar页面跳转时pages.json中所配置的background与backgroundColor属性均没有生效，只有在非tabbar页面跳转时生效。

bug描述：

android端在tabbar页面中跳转页面，在pages.json中配置的background与backgroundColor属性均不生效。在非tabbar页面跳转所配置的background或者backgroundColor生效。

{
    "globalStyle": {  
        "navigationBarTextStyle": "white",  
        "navigationBarTitleText": "uni-app",  
        "navigationBarBackgroundColor": "#282828",  
        "backgroundColorTop": "#282828",  
        "backgroundColorBottom": "#282828",  
        // "backgroundColor": "#282828",  
        "app-plus":{  
            "background": "#1890ff"  
        }  
    }
}

如上面配置，我配置background颜色为#1890ff蓝色，在tabbar页面跳转的时候颜色为#ffffff，在非tabbar页面跳转时为#1890ff。

图片

zlyuanteng 1楼•17 天前

globalStyle下的backgroundColor，仅支持微信小程序。 app-plus下background无效问题已确认，后续会优化。临时解决方案：在页面里设置 page{
background:#1890ff;
} 已加分，感谢您的反馈！

bupafengyu 2楼•17 天前

请问vue页面app-plus下background无效的问题后续优化有进展吗？

songsunli 3楼•17 天前

我看IOS好像是有效果的，手里没Android设备，保持关注中

caililin 4楼•17 天前

在 uni-app 中，pages.json 文件用于配置页面的路由、窗口样式、导航栏、TabBar 等。如果你在 pages.json 中配置的 tabBar 的 background 属性在 Android 端未生效，可能是由于以下几个原因：

1. 检查 `tabBar` 配置

首先，确保你在 pages.json 中正确配置了 tabBar 的 background 属性。例如：

{
  "pages": [
    // 页面配置
  ],
  "tabBar": {
    "list": [
      // TabBar 列表
    ],
    "backgroundColor": "#FFFFFF", // 背景颜色
    "backgroundTextStyle": "dark" // 背景文字样式
  }
}

2. 检查颜色值

确保你设置的颜色值是有效的。颜色值可以是十六进制颜色码（如 #FFFFFF）或者颜色名称（如 white）。

3. 检查平台差异

tabBar 的样式在不同平台上可能会有所不同。特别是 Android 和 iOS 的默认样式可能会有差异。你可以通过 condition 配置来为不同平台设置不同的样式：

{
  "tabBar": {
    "list": [
      // TabBar 列表
    ],
    "backgroundColor": "#FFFFFF",
    "backgroundTextStyle": "dark",
    "condition": {
      "os": "android",
      "backgroundColor": "#F0F0F0" // 为 Android 单独设置背景色
    }
  }
}

4. 检查 `tabBar` 的 `custom` 属性

如果你在 tabBar 中设置了 custom 属性为 true，那么 tabBar 的默认样式将失效，你需要完全自定义 TabBar 的样式。在这种情况下，backgroundColor 等属性将不再生效。

{
  "tabBar": {
    "custom": true,
    "list": [
      // TabBar 列表
    ]
  }
}

如果你使用了 custom: true，你需要通过自定义组件来实现 TabBar 的样式。

5. 检查 `tabBar` 的 `borderStyle`

tabBar 的 borderStyle 属性也会影响 TabBar 的显示效果。你可以尝试调整 borderStyle 来查看是否影响了背景色的显示。

{
  "tabBar": {
    "list": [
      // TabBar 列表
    ],
    "backgroundColor": "#FFFFFF",
    "borderStyle": "white" // 可选值: "black" 或 "white"
  }
}

6. 检查页面层级

有时，页面的层级关系可能会影响 TabBar 的显示。确保你的页面布局没有覆盖 TabBar。

7. 清除缓存并重新编译

有时，缓存可能会导致配置未生效。尝试清除项目缓存并重新编译项目。

8. 检查 uni-app 版本

确保你使用的 uni-app 版本是最新的，或者至少是一个稳定的版本。某些旧版本可能存在 Bug，导致配置不生效。

9. 使用 `uni.setTabBarStyle` 动态设置

如果静态配置不生效，你可以尝试在页面加载时使用 uni.setTabBarStyle 动态设置 TabBar 的背景色：

uni.setTabBarStyle({
  backgroundColor: '#FFFFFF',
  backgroundTextStyle: 'dark'
});