uni-app 在vue页面中设置窗口背景失效

uni-app 在vue页面中设置窗口背景失效

示例代码：

{
    "backgroundColor": "#fbfbfb",
    "app-plus": {
        "background": "#fbfbfb"
    }
}
设置窗口背景失效

操作步骤：

{
    "backgroundColor": "#fbfbfb",
    "app-plus": {
        "background": "#fbfbfb"
    }
}
设置窗口背景失效

预期结果：

{
    "backgroundColor": "#fbfbfb",
    "app-plus": {
        "background": "#fbfbfb"
    }
}
设置窗口背景为灰色。

实际结果：

{
    "backgroundColor": "#fbfbfb",
    "app-plus": {
        "background": "#fbfbfb"
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#FFFFFF",
        "backgroundColor": "#FFFFFF"
    }
}
设置窗口背景为白色。

bug描述：

{
    "backgroundColor": "#fbfbfb",
    "app-plus": {
        "background": "#fbfbfb"
    }
}
设置窗口背景失效

项目信息

项目信息 值
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 6.1
HBuilderX类型 正式
HBuilderX版本号 3.2.9
手机系统 Android
手机系统版本号 Android 10
手机厂商 华为
手机机型 pot-al00a
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 在vue页面中设置窗口背景失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

相关问题帖子，https://ask.dcloud.net.cn/question/129028

更多关于uni-app 在vue页面中设置窗口背景失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中设置窗口背景失效，通常是由于配置优先级或作用域问题导致的。根据你的代码和项目信息，问题可能出在以下几个方面：

  1. 配置位置错误：backgroundColor 和 app-plus 中的 background 应配置在 pages.json 的 globalStyle 或具体页面的 style 中，而不是直接放在根层级。从你的实际结果来看，globalStyle 中已设置了 backgroundColor: "#FFFFFF"，这会覆盖其他配置。

  2. 优先级问题：在 pages.json 中，具体页面的配置优先级高于 globalStyle。如果你在页面样式中设置了 backgroundColor，但未生效，可能是因为 app-plus 平台配置未正确应用。

  3. 平台差异：backgroundColor 是通用属性，而 app-plus 下的 background 仅适用于 App 平台。如果其他平台（如小程序）的配置干扰了 App 端，可能导致失效。

解决方案：

  • 在 pages.json 的 globalStyle 中统一设置 backgroundColor，并确保 app-plus 配置正确：
    "globalStyle": {
  "backgroundColor": "#fbfbfb",
  "app-plus": {
    "background": "#fbfbfb"
  }
}
  • 如果仅需在特定页面设置，可在该页面的 style 中配置：
    "pages": [
  {
    "path": "pages/index/index",
    "style": {
      "backgroundColor": "#fbfbfb",
      "app-plus": {
        "background": "#fbfbfb"
      }
    }
  }
]
回到顶部