如何设置小程序页面各个部分的背景颜色？

╰半夏微凉° 2022-05-21 06:44 434阅读 0赞

完整的小程序页面除了在页面的.wxml中定义的视图外，还包括导航栏等部分。在.wxss中定义的样式只对页面内容部分起作用，其他部分的背景色如何设置呢？下面就做一个完整的介绍。

**一、主体部分**

首先看下图，标出来了三个部分：

![这里写图片描述][70]

分别如下设置：

1.  app.json -> **“window”: \{“navigationBarBackgroundColor”: “\#EEE”\}**
2.  app.json -> **“window”: \{“backgroundColor”: “\#33CCFF”\}**
3.  app.wxss 设置全局内容样式 **.content \{background-color: “\#CCFF00”\}**

如果要单独设置一个页面的头部样式，就在页面的json文件中设置。注意，与在 app.json 中的写法有点不一样，没有 “window”，例如：

{
      "navigationBarTitleText": "个人中心",
      "navigationBarBackgroundColor": "#0387FE",
      "navigationBarTextStyle": "white"
    }

**二、页面全局背景**

关于页面背景，如果页面长度占不满一屏，就会出现下面的尴尬情况：  
![这里写图片描述][70 1]

解决办法是在页面的.wxss里设置（注意，**page前没有点**）：

> page \{ background-color: \#fef2dc; \}

**三、底部菜单**

最后，还有一个部分，在app.json中设置了tarBar，就会出现底部菜单，如下图：

![这里写图片描述][70 2]

底部菜单的背景颜色设置在app.json中：**“tabBar”: \{“backgroundColor”: “\#fff9e9”\}**。

--------------------

[70]: /images/20220521/d9a74feeb60d4b16bc7912e43aa8a88b.png
[70 1]: /images/20220521/2403f567cbf343b2a101eb32005b9c02.png
[70 2]: /images/20220521/5eda0dd91d1642c9b57e94a57d640d39.png

发表评论取消回复

表情：

评论列表（有 0 条评论，434人围观）

还没有评论，来说两句吧...

相关阅读

相关如何设置文字颜色和背景颜色？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 设置文字颜色（color属性） ⭐ 设置背景颜色（background-color属性） ⭐ 写在最后

曾经终败给现在/ 2023年10月14日 16:24/ 0 赞/ 59 阅读

相关【Qt】QPlainTextEdit 设置颜色、设置单行字体颜色、设置背景颜色、设置字体大小

自定义函数我们需要的操作比较多，可以放入函数内运行用自定义函数代替plainTextEdit.appendPlainText(); 来做到控制每一行字体颜色的

素颜马尾好姑娘i/ 2023年10月01日 09:06/ 0 赞/ 35 阅读

相关微信小程序如何设置背景图片

今天第一次来尝试微信小程序，可在了解完基本常识之后。设置背景图片就难到我了。 CSDN上面找了一些办法，大致有以下几种： 1.转换为base64格式或者使用网上图片

心已赠人/ 2023年07月20日 13:39/ 0 赞/ 53 阅读

相关小程序之修改当前页面背景、标题颜色

在小程序这一页面的json文件里添加如下代码，如在首页index的index.json添加如下代码： { "navigationBarTitleT

亦凉/ 2022年11月22日 10:13/ 0 赞/ 243 阅读

相关 html 背景颜色设置为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...

在网页布局中有时为了网页的整体美观，可能需要将网页中的某些部分设置为背景颜色透明，那么如何设置背景颜色透明呢？本篇文章就来给大家介绍一下css设置背景颜色透明的方法。在cs

旧城等待，/ 2022年10月07日 04:46/ 0 赞/ 362 阅读

相关设置背景颜色

设置背景颜色： <input type="color" οnchange="document.body.bgColor=document.getElementById('cur

末蓝、/ 2022年07月15日 10:23/ 0 赞/ 317 阅读

相关微信小程序开发——修改页面的背景颜色

背景颜色要设置为灰色，于是我给最外层的view设置了样式，如下： .order-home { background: F3F3F3; } 结果发现只有最外层view

拼搏现实的明天。/ 2022年05月24日 13:52/ 0 赞/ 1196 阅读

相关如何设置小程序页面各个部分的背景颜色？

完整的小程序页面除了在页面的.wxml中定义的视图外，还包括导航栏等部分。在.wxss中定义的样式只对页面内容部分起作用，其他部分的背景色如何设置呢？下面就做一个完整的介绍。

╰半夏微凉°/ 2022年05月21日 06:44/ 0 赞/ 435 阅读

相关小程序设置背景图片

小程序的元素，比如<view>不可以在wxss里面设置背景图片，只能在<image>里面设置图片如果想在<view>标签上设置背景图片，只能在wxml里面设置行内样式，并且

墨蓝/ 2022年05月12日 01:40/ 0 赞/ 277 阅读

相关 mpvue小程序分页面的页面配置，颜色、标题、背景等不起作用

在app.json配置了全局的页面配置 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

「爱情、让人受尽委屈。」/ 2021年09月17日 02:14/ 0 赞/ 267 阅读