uni-app pages.json globalStyle backgroundColor 不生效
uni-app pages.json globalStyle backgroundColor 不生效
详细问题描述
微信小程序中backgroundColor
应该是生效的但是并没有生效
重现步骤
创建项目,把pages.json/globalStyle/backgroundColor设为#F6F6F6
结果
没有变化
期望
窗口背景色变为#F6F6F6
IDE运行环境说明
环境 | 版本 |
---|---|
HBuilderX | 2.4.2.20191115 |
mac | 10.13.1 (17B1003) |
uni-app运行环境说明
环境 | 版本 |
---|---|
微信小程序开发者工具 | 1.02.1911180 |
创建方式 | cli创建的 |
编译模式 | 自定义组件 |
更多关于uni-app pages.json globalStyle backgroundColor 不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
6 回复
这里配置微信小程序的backgroundColor不是指的html的backgroundColor而是webview的backgroundColor,当iOS下拉的时候会漏出来的那部分。
更多关于uni-app pages.json globalStyle backgroundColor 不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
对对对,是窗口的背景色,不是页面背景色,弄混了
当app的主题处于暗色模式,需要修改ios下拉的时候漏出来的这部分背景色,是不支持修改吗
遇到同样的问题。请解决!
遇到同样的问题。请解决
在微信小程序中,globalStyle.backgroundColor
确实存在不生效的情况。这是因为微信小程序本身的限制导致的,需要额外配置:
- 在微信小程序中,窗口背景色需要在
app.vue
的onLaunch
里通过wx.setBackgroundColor
API手动设置:
onLaunch() {
wx.setBackgroundColor({
backgroundColor: '#F6F6F6',
backgroundColorTop: '#F6F6F6',
backgroundColorBottom: '#F6F6F6'
})
}
- 同时确保pages.json中仍然保留配置:
"globalStyle": {
"backgroundColor": "#F6F6F6"
}
- 对于下拉刷新背景色,还需要单独设置:
"globalStyle": {
"backgroundColor": "#F6F6F6",
"refreshStyle": {
"backgroundColor": "#F6F6F6"
}
}