vue+vant h5项目弹出原生键盘隐藏tabbar

当输入框获得焦点弹出原生键盘的时候，tabbar很容易出现被顶上去的现象

在需要的页面监听屏幕的高度

data里面

 defaultPhoneHeight: 0, //屏幕默认高度
      nowPhoneHeight: 0 //屏幕现在的高度

在created里面（可以防止刷新）

  created() {
    
    
    this.defaultPhoneHeight = window.innerHeight;
    window.onresize = () => {
    
    
      //这个方法会被调用两次,软键盘弹出后和软件收起后
      this.nowPhoneHeight = window.innerHeight;
    };
  },

在watch里面监听

  watch: {
    
    
    nowPhoneHeight: function() {
    
    
      var tabbar = document.getElementsByClassName("tabBar");
      if (this.defaultPhoneHeight != this.nowPhoneHeight) {
    
    
        // 当软键盘弹出,隐藏tabbar
        for (let index = 0; index < tabbar.length; index++) {
    
    
          let element = tabbar[index];
          element.style.display = "none";
        }
      } else {
    
    
        // 相等代表软键盘收起后,显示tabbar
        for (let index = 0; index < tabbar.length; index++) {
    
    
          let element = tabbar[index];
          element.style.display = "block";
        }
      }
    }
  },

最后别忘了销毁监听

 destroyed() {
    
    
    window.onresize = null;
  },