【uni-app】如何修改uni-app子页面的背景颜色

背景

项目里面看到已经被在App.vue中设置了背景色全局生效，想修改子页面单独的页面页面背景色，发现没能一下就生效。

<style lang="scss">
  page {
    background-color: #F1F3F6;
    height: 100%;
    font-size: 16px;
    color: #333;
  }
 </style>

尝试的无效方案

1. 在pages.json中设置子页面的’backgroundColor’属性无效
2. 在页面中的style标签内是scoped的设置page标签的背景色，发现也无效

无效尝试1，这是因为 backgroundColor 指的窗体背景颜色，而不是页面的背景颜色，即窗体下拉刷新或上拉加载时露出的背景

有效方案

后来要设置子页面的背景色，通过在子页面在放一个style标签，但不要设置scoped这样是有效的，只是作用于它自己这个子页面的背景色，不影响其他页面的背景色。

核心代码

<style>
page {
	background: #fff;
}
</style>
<style lang='scss' scoped>

</style>

参考：
微信小程序设置backgroundColor无效

uni-app修改页面背景色

记录自己的前端探索过程，方便日后查阅也希望能帮助到需要的人。