微信小程序設置頁面背景色的方式（全局或單頁面）

目錄

• 全局背景色設置
• 單個頁面

大概或許可能是自己配置不到位，頁面.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);
}