vue獲取整個頁面高度是開發(fā)過程中經(jīng)常需要使用的功能,無論是在開發(fā)過程中自適應(yīng)頁面大小還是在進(jìn)行滾動條加載數(shù)據(jù)時都會用到。以下是獲取整個頁面高度的方法:
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的生命周期函數(shù),用于在組件掛載后執(zhí)行。由于頁面元素還未渲染完成,需要使用this.$nextTick()確保頁面已經(jīng)完成呈現(xiàn)。
代碼中,首先設(shè)置html和body的高度為100%,為獲取頁面高度做鋪墊。接下來使用Math.max()方法獲取頁面高度,并將結(jié)果輸出至控制臺。
在頁面中使用以上代碼,即可獲取頁面高度。