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);
   }
   },