小程序修改单页面的背景颜色

本文介绍了如何正确设置微信小程序页面的背景颜色。首先尝试通过app.json全局配置未能生效,最终在wxss中针对page元素设置背景色成功。此方法不会影响其他页面样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

设置小程序的页面背景颜色,一开始设置了一个全局的背景颜色,在app.json的widows对象中进行设置

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "backgroundColor": "#f6f6f8",
    "navigationBarTextStyle": "black"
  },

后来在页面中第一反应也是使用单独的json文件设置,

{
      "backgroundColor": "#fff",
      "navigationBarTitleText": "添加评价"
}

果断发现,没有卵用啊,页面背景还是灰色。
灰色区域为背景

解决方法,在对应的wxss文件中设置一个page类:

 page {
  background-color: #fff;
} 

这样整个页面的背景色就设置为全白,且不影响其他页面,其它页面有特殊要求,也是如此修改就可以了。
页面背景色整页为白色

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值