如何設定小程式頁面各個部分的背景顏色?
阿新 • • 發佈:2019-01-07
完整的小程式頁面除了在頁面的.wxml中定義的檢視外,還包括導航欄等部分。在.wxss中定義的樣式只對頁面內容部分起作用,其他部分的背景色如何設定呢?下面就做一個完整的介紹。
一、主體部分
首先看下圖,標出來了三個部分:
分別如下設定:
- app.json -> “window”: {“navigationBarBackgroundColor”: “#EEE”}
- app.json -> “window”: {“backgroundColor”: “#33CCFF”}
- app.wxss 設定全域性內容樣式 .content {background-color: “#CCFF00”}
需要說明的是,在微信開發環境中,第2部分(下拉出現的那部分割槽域)的樣式是不起作用的,但在真機上測試就沒問題。
如果要單獨設定一個頁面的頭部樣式,就在頁面的json檔案中設定。注意,與在 app.json 中的寫法有點不一樣,沒有 “window”,例如:
{
"navigationBarTitleText": "個人中心",
"navigationBarBackgroundColor": "#0387FE",
"navigationBarTextStyle": "white"
}
二、頁面全域性背景
關於頁面背景,如果頁面長度佔不滿一屏,就會出現下面的尷尬情況:
解決辦法是在頁面的.wxss裡設定(注意,page前沒有點):
page { background-color: #fef2dc; }
三、底部選單
最後,還有一個部分,在app.json中設定了tarBar,就會出現底部選單,如下圖:
底部選單的背景顏色設定在app.json中:“tabBar”: {“backgroundColor”: “#fff9e9”}。