vue移動端安卓機上鍵盤彈起時把底部菜單頂起來

1. ios和安卓的鍵盤彈起方式不同, ios直接彈出鍵盤, 不影響頁面, 而安卓鍵盤彈起時會把頁面頂起來, 這樣就會把底部菜單頂起來了, 絕對定位也沒用;

2. 解決思路: 頁面進來時獲取默認的屏幕高度, 定義一個值, 用來監聽實時屏幕的高度, 當實時屏幕高度小於默認高度時, 說明鍵盤彈起來了, 這時就隱藏底部菜單, 當鍵盤收起時, 再顯示底部菜單;

3. 具體代碼:
   (1) 在data中定義默認值
   data() {
   return {
   docmHeight: document.documentElement.clientHeight, //默認屏幕高度
   showHeight: document.documentElement.clientHeight, //實時屏幕高度
   hidshow:true, //顯示或者隱藏footer,
   isResize:false //默認屏幕高度是否已獲取
   };
   },

   (2) 在mounted中獲取屏幕高度
   mounted() {
   window.onresize = ()=>{
   return(()=>{
   if (!this.isResize) {
   //默認屏幕高度
   this.docmHeight = document.documentElement.clientHeight;
   this.isResize = true;
   }
   //實時屏幕高度
   this.showHeight = document.body.clientHeight;
   console.log(this.showHeight);
   })()
   }
   },

   (3) 用watch監聽屏幕高度變化, 控制底部菜單的顯示隱藏
   watch: {
   showHeight() {
   if(this.docmHeight >= this.showHeight){
   this.hidshow = false
   }else{
   this.hidshow = true
   }
   console.log(this.hidshow);
   }
   },