vue 移动端M站vant tabbar被软键盘顶上来或有fixed属性的盒子被顶上来的解决方法

首先先了解onresize这个方法:当浏览器被重置大小时执行,他相当于一个监听函数。

一般同学了解完这个函数后应该脑袋里就已经浮现出了一系列的解决方案.

我的解决方案是首先创建三个变量:

1:通过v-show控制盒子的显示与隐藏,

2:记录手机的高度,

3:记录软键盘弹出后,当前屏幕的高度(解释一下,当调用软键盘后,屏幕的高度会发生改变,屏幕的高度会等于(手机原始高度-软键盘的高度))

  <div v-show="bottomIsShow">
      <Bottom></Bottom>
    </div>  

data(){
    return {
          bottomIsShow:true,//控制底部tabbar显示与隐藏
          defaultPhoneHeight:0, //屏幕默认高度
          nowPhoneHeight:0, //屏幕现在的高度
    }
},
  mounted() {
    this.defaultPhoneHeight = window.innerHeight
    window.onresize = ()=>{ //这个方法会被调用两次,软键盘弹出后和软件收起后
      this.nowPhoneHeight = window.innerHeight 
    }
  },
  watch:{
    nowPhoneHeight:function(){
      if(this.defaultPhoneHeight != this.nowPhoneHeight){
        // 当软键盘弹出,改变bottomIsSHow变量然后去控制bottom的显示与隐藏
        this.bottomIsShow=false;
      }else{
        // 相等代表软键盘收起后,与上同理
        this.bottomIsShow=true
      }
    },
  },

  destroyed() {
    //页面销毁前要记得这个监听消除掉;
    window.onresize = null
  }