uni-app 无法修改页面背景色问题描述简单已解决

示例代码：

<template>  
    <view class="content">  
        hello world!  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style lang="scss" scoped>  
    page{  
    background: red;  
  }  
</style>

操作步骤：

直接在app基座中运行。

预期结果：

页面的背景色应该为红色。

实际结果：

页面的背景色为白色。

bug描述：

很简单的代码，在两个平台上的表现不一致，在本地浏览器上运行是正常的，但是运行在APP基座上就不正常了。
新建一个空白项目，仅修改了默认页面的代码。
仅修改的代码：见下面的示例代码。
再次翻看了一下官方的文档，是因为scoped导致的。

信息类别	信息内容
产品分类	uniapp/App
PC开发环境	Windows
PC开发环境版本	版本 Windows 11 专业版版本 23H2 安装日期 ‎2024/‎2/‎27 操作系统版本 22631.3155 体验 Windows Feature Experience Pack 1000.22684.1000.0
HBuilderX类型	正式
HBuilderX版本	4.14
手机系统	Android
手机系统版本	Android 14
手机厂商	小米
手机机型	小米14
页面类型	vue
Vue版本	vue3
打包方式	云端
项目创建方式	HBuilderX

示例图片1 示例图片2

更多关于uni-app 无法修改页面背景色问题描述简单已解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yuanlaile 1楼

更多关于uni-app 无法修改页面背景色问题描述简单已解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在 uni-app 中，如果你无法修改页面的背景色，可能是因为你没有正确设置页面的样式。以下是一些常见的原因和解决方案：

1. 全局背景色设置

如果你想为整个应用设置背景色，可以在 App.vue 中设置全局样式：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
/* 设置全局背景色 */
body, #app {
  background-color: #f0f0f0; /* 你想要的背景色 */
  min-height: 100vh; /* 确保背景色覆盖整个页面 */
}
</style>

2. 单个页面背景色设置

如果你只想为某个页面设置背景色，可以在该页面的样式部分进行设置：

<template>
  <view class="page-container">
    <!-- 页面内容 -->
  </view>
</template>

<style>
.page-container {
  background-color: #f0f0f0; /* 你想要的背景色 */
  min-height: 100vh; /* 确保背景色覆盖整个页面 */
}
</style>

3. 检查样式优先级

如果你已经设置了背景色但仍然没有生效，可能是因为其他样式覆盖了你的设置。你可以使用 !important 来提高优先级：

.page-container {
  background-color: #f0f0f0 !important;
}

4. 使用 `page` 样式

在 uni-app 中，page 是一个特殊的样式类，用于设置页面的样式。你可以在页面的样式中直接设置 page 的背景色：

<style>
page {
  background-color: #f0f0f0; /* 你想要的背景色 */
}
</style>

5. 检查平台差异

不同的平台（如 H5、小程序、App）可能有不同的样式表现。如果你在某个平台上背景色没有生效，可以检查该平台的样式设置是否有特殊要求。

6. 使用 `uni.setNavigationBarColor`

如果你想修改导航栏的背景色，可以使用 uni.setNavigationBarColor 方法：

uni.setNavigationBarColor({
  frontColor: '#ffffff', // 前景色，包括标题、按钮等
  backgroundColor: '#0000ff' // 背景色
});

uni-app 无法修改页面背景色 问题描述简单已解决