当前位置: 首页 > >

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

发布时间:

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


一、主体部分


首先看下图,标出来了三个部分:



分别如下设置:


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

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


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

二、页面全局背景


关于页面背景,如果页面长度占不满一屏,就会出现下面的尴尬情况:


解决办法是在页面的.wxss里设置(注意,page前没有点):



page { background-color: #fef2dc; }



三、底部菜单


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



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



友情链接: