（Vue）移動端點擊輸入框，彈出鍵盤，底部被頂起問題：https://www.jianshu.com/p/210fbc846544
問題描述：Vue開發中，當我們相對於父視圖的底部布局子控件時，需要用position:fixed，如果頁面內容不是很長，沒有超出屏幕范圍，那就還好，沒有問題；一旦超出屏幕范圍，當你點擊輸入框，彈出鍵盤時，底部固定定位的子控件就會被頂起來。
這個問題在iOS端不會出現，在安卓端會出現，原因是鍵盤加載方式不一樣，這里不作詳情解答。
解決方案：在鍵盤彈起時，頁面高度變小，底部固定定位上升，所以我們只需要在頁面高度變小時，隱藏底部子控件，當鍵盤消失時再顯示底部子控件。
解決方法：檢測瀏覽器的resize事件，當高度過小時就可以判定為出現這種情況，這時把定位改成absolute或者直接隱藏掉之類的。
第一步： 先在 data 中去 定義 一個記錄高度是 屬性
data () {
return {
docmHeight: '0', //默認屏幕高度
showHeight: '0', //實時屏幕高度
hidshow:true //顯示或者隱藏footer,
isResize:false //默認屏幕高度是否已獲取
};
},
第二步： 我們需要將 reisze 事件在 vue mounted 的時候 去掛載一下它的方法
mounted() {
// window.onresize監聽頁面高度的變化
window.onresize = ()=>{
return(()=>{
if (!this.isResize) {
//默認屏幕高度
this.docmHeight: document.documentElement.clientHeight
this.isResize = true
}
//實時屏幕高度
this.showHeight = document.body.clientHeight
})()
}
},
第三步：watch監控比較，判斷按鈕是否該顯示出來
showHeight:function() {
if(this.docmHeight > this.showHeight){
this.hidshow=false
}else{
this.hidshow=true
}
}
第四步：在模板中給footer添加v-show
<div class="footer" v-show="hidshow">
移動端點擊輸入框，彈出鍵盤，底部被頂起問題
</div>
作者：rightmost
鏈接：https://www.jianshu.com/p/210fbc846544
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。