vue/uni-app 设置（或动态设置）页面背景色超全方法 以及各种可能问题解决（不要比我倒霉）

废话和拓展可能有点多，有需要的朋友直接按目录，更多问题可以交流~

目录

pages.json里backgroundColor并不能达成效果，是设置窗体颜色

使用page{background-color: #fff; }可实现

利用最外层元素，动态设置页面背景颜色（图片）

最开始使用body{}来设置了背景色，至于我为什么用body我也忘了，然后发生了两件诡异的事情

1. 在微信小程序模拟器里，有时生效，有时无效。

2. 如果@import的css里面写了body，当前vue页面的style标签里也写了body，在微信小程序模拟器里，就会没有一个生效。

3. 后来被要求所有页面都加上scoped，即，body就失效了。但如果坚持用，通过以下方式，就有效果。（莫非是scoped特殊关照，body没法加标识就不给用了？）

   
   ​
   

打代码遇见这些个莫名其妙的CSS问题就贼烦心，同事本来就对这个body很迷惑，干脆就让我别用了，于是走上了探索(踩坑)之路。

pages.json里backgroundColor并不能达成效果，是设置窗体颜色

一开始随手在网页里搜，有朋友说pages.json里backgroundColor来设置，结果没反应，然后去仔细看了看uniapp的官方文档才发现，人家是设置窗体颜色（下拉显示出来的窗口的颜色），这里提醒各位，还是官方文档优先看，不行咱再找别的办法。（写文章的朋友也是，这样写出来误导后人不太好啊，咱打代码的不就是讲究要严谨么。）

看都看了，顺便又看到uni.setBackgroundColor()，可以在js里动态设置这个窗体颜色，虽然暂时没有想到这种绚丽的效果啥时候会用到。

使用page{background-color: #fff; }可实现

如果想全局设置，在App.vue里写如下代码即可

Page {background-Color: #fff;}

如果单页面设置，把以上代码在样式部分写就好了，可以覆盖全局设置。

但要注意的是如果把Page写在带scoped的样式标签里会失效，如下：

原因应该是类似page、body这种不算是页面元素，没有DOM节点，scoped不知道要怎么私有化处理了（不确定，这点有待更进一步研究）

解决办法和开头一样，给Page写个单独style标签（方法来自vue-loader的官方文档关于有作用域的 CSS里提到可以混用本地和全局样式来解决）

​

利用最外层元素，动态设置页面背景颜色（图片）

拓展一下，控制节点的class值就可以实现切换背景色。来自12.关于uniapp小程序设置页面背景色无效的问题及解决方案_endingCode的博客-CSDN博客

本来文章写到这里就应该结束了，写的时候是周五下班，周末打算出去玩，不带电脑。结果，最后时刻又又又碰到问题了！

按照上面写法，若content里最上方的子元素有margin-top，在小程序里，这块则会显示page的颜色而非content的颜色。即子元素的margin-top不算在父元素里？讲不讲道理了？心态真是有点崩了。代码写的不顺的时候，小问题总能迁出一大堆问题。

（2021/12/20 在解决其他问题的时候意外收获，这里是击穿问题导致

MDN的文档：

如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

作者提供的几个办法：

1、父元素加border。这样会多加border的宽度。

2、父元素overflow：auto。

3、父元素display：flex或inline-block。

4、使用绝对定位。

5、愿意的话可以在父元素子元素之间再加一个div咯。

参考博客：CSSmargin击穿问题（子元素margin-top会影响父元素） - sq-blog - 博客园

办法总还是有的。

1、再加个view，挡住page露出部分

.bar{margin-top: -10rpx;//等同-子元素margin-top值height: 10rpx;//等同子元素margin-top值width: 100%;position: absolute;//如果不加，页面最下方会露出margin-top值的高度的pagebackground-color: #fff;//等同需要的背景色}

2、用父元素的padding-top取代子元素的margin-top，达成相同效果

3、给最外层view加padding：任意值，这个bug就会消失(魔法打败魔法)（现在证明不是魔法，是科学知识）

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！