大家好，我是木瓜太香，大家在開發單頁應用的時候，經常會遇到這樣的需求，頭部和尾部兩個組件是大多陣列件公用的，而中間的內容區域則是單獨存在的，而且一般內容組件邏輯會比較多，如果我們不停重繪頁面可能會出現尾部組件閃爍的問題，
這個問題的出現主要是因為，內容區組件要比尾部組件大，而且尾部組件一般是沒有什么邏輯的，相當于一個靜態組件，
解決這個問題的思路就是想辦法在頁面最開始加載的時候隱藏尾部組件，之后再合適的時候將尾部組件顯示出來即可，
說一下公司專案（VUE）中的解決辦法，我們的思路是，先讓尾部組件固定定位到頁面外部，這樣在最開始加載的時候就看不到尾部組件，然后我們通過監聽路由變化來讓組件顯示，具體做法如下，
-
定義類名
.footer-fixed將該類名添加到footer組件上.footer-fixed { position: fixed; bottom: -200px; } -
利用 vue 中的 watch 監聽路由，恢復
footer組件的顯示$route: { handler () { // 組件加載完成之后將隱藏的底部顯示出來 const footerDom = document.getElementsByClassName('footer')[0] footerDom.classList.remove('footer-fixed') } }
當然你也可以使用路由的全域后置守衛做到同樣的效果，不過我們當時考慮到的是邏輯相關性，所以才采用監控的方式，
更多前端技巧可以關注一下嗶哩嗶哩：木瓜太香
有前端問題需要討論的可以加我的qun:237871108，也可以通過嗶哩嗶哩搜索木瓜太香找到我，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/935.html
標籤：JavaScript
上一篇：Vue基礎(八)：Vue前端互動
下一篇：實操ES6之Promise