uni-app 3.1.14版本中 pages.json文件配置的backgroundColor在安卓端vue文件中无法生效

uni-app 3.1.14版本中 pages.json文件配置的backgroundColor在安卓端vue文件中无法生效

类别 信息
产品分类 uniapp/App
PC开发环境 Mac
PC版本号 11.3.1
开发工具 HBuilderX
工具版本号 3.1.14
手机系统 全部
手机厂商 模拟器
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：
全部

操作步骤：
请看示例demo

预期结果：
正确显示配置的backgroundColor

实际结果：
无法正确显示配置的backgroundColor

bug描述：
pages.json文件中配置的backgroundColor在安卓端的vue文件中无法生效，不论是globalStyle还是page.style中都无法生效


更多关于uni-app 3.1.14版本中 pages.json文件配置的backgroundColor在安卓端vue文件中无法生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

16 回复

vue中你可以给最外层的view设置min-height:100vh; background-color:#xxxxxx；的样式

更多关于uni-app 3.1.14版本中 pages.json文件配置的backgroundColor在安卓端vue文件中无法生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我知道，这种方式只是绕开bug的一种处理方式，在亮色模式下是可以这样暂时操作的，但是在深色模式下就有很大问题，而且这个bug只是安卓端才有的，显然是必须要修复的

现在问答社区跟踪bug的效率，相比3.x以前的版本，真的差太远了

目前由于 uniCloud、uni-app（vue3）等开发任务较紧急，社区问题排查分布人力较少，当其开发告一段落，会分配更多人力到社区处理。

回复 DCloud_UNI_GSQ: 唉，难怪了，真是辛苦你们了这么多任务，但是遇到bug了没人跟，我们也着急，我觉得社区问题多人力支援还是要稍微多一些才好

配置的什么属性的backgroundColor？tabBar还是globalStyle的？

backgroundColor globalStyle || pages.style.backgroundColor

pages.style.backgroundColor文档已写明，只有微信小程序、百度小程序、字节跳动小程序支持
globalStyle设置backgroundColor时，vue文件需要设置一下page的背景颜色，否则默认是白色的

1.pages.style.backgroundColor 在 ios 端的设置是有效的 2.globalStyle 设置 backgroundColor 时，vue 文件内的样式部分设置 page 的背景色并不是窗口背景色，这只是页面的背景色，当我使用深色模式时，依然是优先展示窗口背景色再展示页面的背景色 3.上传的附件中，我已经在 App.vue 文件的公共样式部分设置了 page 的背景色为透明，如果这个地方不设置为透明色，那么苹果端设置 pages.style.backgroundColor 才默认仍旧是白色

另：该帖子上传的附件示例及所描述的问题，也仅在安卓端复现，苹果端是完美的，即便按照你的说法可以实现，难道这种界面的展示还要和苹果端异同吗？

回复 雨夜敬清秋: 目前安卓globalStyle上backgroundColor设置属性为透明色之外的颜色，page设置透明时。确实有显示不出来背景色的问题

回复 DCloud_UNI_LXH: 那这个问题会记录并修复吗？如果我将 globalStyle.backgroundColor 设置为透明色，然后在 App.vue 的公共部分对 page 设置一个公共的透明色之外的颜色，这个设置也仅对 vue 文件有效，因为 nvue 不支持直接对标签写样式。

回复 DCloud_UNI_LXH: 另外，这个问题也会影响到后续在 APP 端支持动态修改 globalStyle.backgroundColor 造成阻碍，因为只有支持动态修改 globalStyle.backgroundColor 这个功能，才能使得 APP 端在支持深色模式时，视觉体验才能过关。

回复 雨夜敬清秋: 关于vue页面背景颜色设置还在讨论中。nvue页面会直接显示你设置的globalStyle.backgroundColor

回复 DCloud_UNI_LXH: nvue我知道，现在的问题就是我的项目是vue+nvue混合项目，我想大部分稍微复杂点的项目都是如此，所以必须要都兼顾到。

在uni-app 3.1.14版本中，pages.json配置的backgroundColor在安卓端不生效是已知问题。这是由于Android平台渲染机制差异导致的。

建议采用以下解决方案：

  1. 在页面的vue文件中设置页面背景色：
page {
  background-color: #你的颜色值;
}
  1. 如果需要在全局设置，可在App.vue的style中配置：
page {
  background-color: #全局背景色;
}
  1. 对于特定页面，还可以使用内联样式：
<template>
  <view class="content" :style="{backgroundColor: '#你的颜色值'}">
    <!-- 页面内容 -->
  </view>
</template>
回到顶部