項目用vue版本是2.0的,項目中用到es6
首先需要在data里面定義頁面的高度
data (){ return { fullHeight: document.documentElement.clientHeight }}
把window.onresize事件掛在到mounted
mounted() { const that = this window.onresize = () => { return (() => { window.fullHeight = document.documentElement.clientHeight that.fullHeight = window.fullHeight })() } }
監聽window.onresize事件
watch: { fullHeight (val) { if(!this.timer) { this.fullHeight = val this.timer = true let that = this setTimeout(function (){ that.timer = false },400) } } }
這里的定時器是為了優化,如果頻繁調用window.onresize方法會造成頁面卡頓,增加定時器會避免頻繁調用window.onresize方法
以上這篇vue 監聽屏幕高度的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答