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

╰半夏微凉° 2022-05-21 06:44 368阅读 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 条评论，368人围观）

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

相关阅读

相关 Eclipse背景颜色设置

Eclipse背景颜色修改：操作界面默认颜色为白色。对于我们长期使用电脑编程的人来说，白色很刺激我们的眼睛，所以我经常会改变workspace的背景色，使眼睛舒服一些。设置

﹏ヽ暗。殇╰゛Y/ 2022年12月22日 04:45/ 0 赞/ 245 阅读

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

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

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

相关 Cadence 背景颜色设置

目录概述一、Allegro PCB Designer 二、OrCAD Capture 三、总结 -------------------- 概述有

约定不等于承诺〃/ 2022年10月20日 00:54/ 0 赞/ 943 阅读

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

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

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

相关设置背景颜色

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

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

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

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

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

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

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

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

相关小程序设置背景图片

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

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

相关 jQuery设置背景颜色

<script type="text/javascript"> $(document.body).css("background","pink")

我会带着你远行/ 2021年12月09日 06:59/ 0 赞/ 405 阅读

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

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

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