目的:主要運(yùn)用在注冊頁面巡蘸,當(dāng)點(diǎn)擊表單中的input,手機(jī)端出現(xiàn)輸入框俭驮,固定在底部的層則會擠到上方回溺,導(dǎo)致頁面不美觀。
注冊頁面展示
不進(jìn)行監(jiān)聽處理的頁面
有圖可知混萝,當(dāng)我點(diǎn)擊input的時候遗遵,固定在底部的層級會被擠在鍵盤上方。
底部固定層級逸嘀,一般使用position:fixed车要;
//Mfooter 固定在頁面底部
<div class="Mfooter" v-show="hidshow">好好學(xué)習(xí) 天天向上</div>
<script>
export default {
//data中的docmHeight和showHeight必須要先有值顯示。
data() {
return {
docmHeight:document.documentElement.clientHeight,
showHeight:document.documentElement.clientHeight,
hidshow:true
}
},
mounted() {
window.onresize = ()=>{
return(()=>{
this.showHeight = document.body.clientHeight;
})()
}
},
watch:{
showHeight:function() {
if(this.docmHeight > this.showHeight){
this.hidshow=false
}else{
this.hidshow=true
}
}
},
methods: {
}
}
</script>
根據(jù)監(jiān)聽判斷使用后
ps:這個方法是百度的厘熟,自己使用感覺可以屯蹦,目前我是覺得不錯。
2.HTML頁面中的window.onresize
window.onresize = funcRef;
funcRef是一個函數(shù)引用绳姨。
<script>
window.onresize=funcRef;
function funcRef(){
//注意clientWidth等的大小寫問題
var Wbox = document.documentElement.clientWidth;
alert(Wbox);
}
</script>