uniapp 设置微信小程序页面背景色 不起作用

追格官方小助手/ 2023年02月07日/ 小程序/ 浏览 4438

在使用 uniapp 开发微信小程序的时候,有时候会遇到设置了页面背景色,但是没作用的情况。


微信小程序中,页面背景色是一个有点麻烦的事情。


首先要明确的是,在页面配置文件 - json 文件中,backgroundColor,设置的是窗口的颜色。


大多数时候,用户看到的并不是窗口,而是覆盖在窗口上的 Page。


所以,在 json 文件中设置窗口的颜色,会导致设置了页面颜色,但是不起作用的情况。正确的设置页面背景色,还需要使用 wxss 使用css 的 backgroundColor 设置 page 的背景色。


在 iOS 系统中,就更麻烦了。因为,多出了一个【窗口头部】和【窗口尾部】的概念,对应在 json 中的配置就是 backgroundColorTop 和 backgroundColorBottom。这两个属性也要设置正确才行。


代码示例:


json文件


{

  "backgroundColor": "#FFFFFF",
  "backgroundColorTop": "#FFFFFF",
  "backgroundColorBottom": "#FFFFFF",

}


wxss文件


page {
	background: #FFFFFF;
}


发表评论

暂无评论,抢个沙发...

客服 工单