vue獲取整個頁面高度是開發過程中經常需要使用的功能,無論是在開發過程中自適應頁面大小還是在進行滾動條加載數據時都會用到。以下是獲取整個頁面高度的方法:
mounted() { this.$nextTick(() => { document.documentElement.style.height = "100%"; document.body.style.height = "100%"; let height = Math.max( document.documentElement.clientHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.body.offsetHeight ); console.log(height); }); }
在上述代碼中,mounted是vue的生命周期函數,用于在組件掛載后執行。由于頁面元素還未渲染完成,需要使用this.$nextTick()確保頁面已經完成呈現。
代碼中,首先設置html和body的高度為100%,為獲取頁面高度做鋪墊。接下來使用Math.max()方法獲取頁面高度,并將結果輸出至控制臺。
在頁面中使用以上代碼,即可獲取頁面高度。
上一篇vue獲取數量
下一篇css騰訊網頁導航欄代碼