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确实存在不生效的情况。这是因为微信小程序本身的限制导致的,需要额外配置:

  1. 在微信小程序中,窗口背景色需要在app.vueonLaunch里通过wx.setBackgroundColorAPI手动设置:
onLaunch() {
  wx.setBackgroundColor({
    backgroundColor: '#F6F6F6',
    backgroundColorTop: '#F6F6F6',
    backgroundColorBottom: '#F6F6F6'
  })
}
  1. 同时确保pages.json中仍然保留配置:
"globalStyle": {
  "backgroundColor": "#F6F6F6"
}
  1. 对于下拉刷新背景色,还需要单独设置:
"globalStyle": {
  "backgroundColor": "#F6F6F6",
  "refreshStyle": {
    "backgroundColor": "#F6F6F6"
  }
}
回到顶部