vue移动端--键盘弹起(隐藏底部按钮)

基本思路是通过监听屏幕的高度来改变底部的显示/隐藏
首先:在data中获取屏幕的默认以及实时高度---->

data() {
return {
    isShow:true,//按照标准隐藏
    domHeight: document.documentElement.clientHeight,  //默认屏幕高度
    showHeight: document.documentElement.clientHeight,   //实时屏幕高度
}

然后实现监听事件(监听高度变换从而改变isShow的值)

  showHeight() {
      if (this.domHeight > this.showHeight) {
        this.hidshow = false;
      } else {
        this.hidshow = true;
      }
    }

最后再mounted(需要注意换取的哪里的高度)移动端建议是可见区域
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

 window.onresize = () => {
      return (() => {
        this.showHeight = document.documenElement.clientHeight;//这里需要注意一下可视区高度。
      })();
    };

你可能感兴趣的:(vue移动端--键盘弹起(隐藏底部按钮))