Vue开发微信公众号默认背景为灰色

最近公司有一个项目，使用Vue开发微信公众号，开发过程遇到一个问题，即设计图的整体背景是白色的，但是公众号里默认的背景是浅灰色，如果某个页面高度没能占满一屏，就会露出浅灰色的默认背景，会显得很不协调。 使用单纯的CSS没能解决这个问题，在网上查了些资料也没发现特别好的方法，最后还是采用了JS解决这个问题。

document.documentElement.style.backgroundColor = "#fff";
this.screenH = window.screen.availHeight;
this.pageH = document.documentElement.offsetHeight;
if (this.pageH < this.screenH) {
document.documentElement.style.height = this.screenH + "px";
document.documentElement.scrollTop = '0';
} else {
document.documentElement.style.height = 'auto';
document.documentElement.scrollTop = '0';
}

思路是，设置网页背景为白色，比较网页高度和屏幕高度，如果网页高度小于屏幕高度，就把网页高度设成屏幕高度。 Vue虽然不推荐直接操作DOM，但是在这个问题中，通过操作DOM能够最简便的解决问题，所以我觉得，该操作DOM的时候还是要用DOM，不要被“Vue中不推荐操作DOM”这句话局限了。

 

转载于:https://www.cnblogs.com/KlllB/p/10215704.html