在使用 uniapp 开发微信小程序的时候,有时候会遇到设置了页面背景色,但是没作用的情况。
微信小程序中,页面背景色是一个有点麻烦的事情。
首先要明确的是,在页面配置文件 - json 文件中,backgroundColor,设置的是窗口的颜色。
大多数时候,用户看到的并不是窗口,而是覆盖在窗口上的 Page。
所以,在 json 文件中设置窗口的颜色,会导致设置了页面颜色,但是不起作用的情况。正确的设置页面背景色,还需要使用 wxss 使用css 的 backgroundColor 设置 page 的背景色。
在 iOS 系统中,就更麻烦了。因为,多出了一个【窗口头部】和【窗口尾部】的概念,对应在 json 中的配置就是 backgroundColorTop 和 backgroundColorBottom。这两个属性也要设置正确才行。
代码示例:
json文件
{
"backgroundColor": "#FFFFFF",
"backgroundColorTop": "#FFFFFF",
"backgroundColorBottom": "#FFFFFF",
}
wxss文件
page {
background: #FFFFFF;
}
暂无评论,抢个沙发...