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”這句話局限了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM