vue实时监听窗口宽度变化
上面的方案每隔0.4秒会获取一次屏幕的宽度,并将宽度值赋值给data中的screenWide,就可以直接通过this.screenWide获取了。既然可以监听到窗口screenWidth值的变化,就可以根据这个值设定不同的自适应方案了!
·
获取窗口宽度:document.body.clientWidth
监听窗口变化:window.onresize
同时回顾一下JS里
这些方法:
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
我们将document.body.clientWidth赋值给data中自定义的变量:
data:{
screenWidth: document.body.clientWidth
}
在页面mounted时,挂载window.onresize方法:
mounted () {
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
}
监听screenWidth属性值的变化,打印并观察screenWidth发生变化的值:
watch:{
screenWidth(val){
// 为了避免频繁触发resize函数导致页面卡顿,使用定时器
if(!this.timer){
// 一旦监听到的screenWidth值改变,就将其重新赋给data里的screenWidth
this.screenWidth = val
this.timer = true
let that = this
setTimeout(function(){
// 打印screenWidth变化的值
console.log(that.screenWidth)
that.timer = false
},400)
}
}
}
上面的方案每隔0.4秒会获取一次屏幕的宽度,并将宽度值赋值给data中的screenWide,就可以直接通过this.screenWide获取了
好!既然可以监听到窗口screenWidth值的变化,就可以根据这个值设定不同的自适应方案了!
更多推荐
已为社区贡献1条内容
所有评论(0)