微信小程序设置页面背景色的方式（全局或单页面）

目录

• 全局背景色设置
• 单个页面

大概或许可能是自己配置不到位，页面.json 的 window 里配的背景色无效，这里采用了别的方式去实现效果，记录一下自己一机灵想到的解决方式

• 微信小程序如何修改单页面背景色
  • 原来页面.json 里配的是上拉下拉列表是裸露出来的颜色，而不是我们所需要的页面背景色

全局背景色设置

将每个页面的默认背景色设置成灰色，一次配置，所有页面生效

（适用于大多数页面背景颜色一致的情况，特殊页面单独设置即可）

• 其他页面是默认继承过去的背景色，你不设置用的就是这里设置的

app.wxss

/**app.wxss**/
page {
  background-color: rgb(245, 245, 245);
}

单个页面

xxxx.wxss

同上，可以直接设置页面里 page 的样式

/**index.wxss**/
page {
  background-color: teal;
}

当然，也可以采用下面这种方式

单个页面最外层包个 <view class="pageContainer"></view> 作为根容器，来设置样式，给定背景色

• 关键点 min-height: 100vh;：页面最低高度100%屏幕高度
  • 内容不足一屏时，pageContainer 高度就是100%屏幕高度
  • 内容超过一屏时，内容有多高，pageContainer 就有多高

/**index.wxss**/
.pageContainer{
  min-height: 100vh;
  background-color: rgb(245, 245, 245);
}