移动端点击输入框，弹出键盘，底部被顶起问题(vue/uniapp/小程序)

vue

• 监听页面高度变化

<!--1.先在 data 中去 定义 一个记录高度是 属性-->
data () {
    return {
        docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
        showHeight: document.documentElement.clientHeight,   //实时屏幕高度
        footer:true  //显示或者隐藏footer
    };
  },
  
<!--2.我们需要将 reisze 事件在 vue mounted 的时候 去挂载一下它的方法-->
activated() {   //如果项目当中有用到keep-alive、就把他挂载到activated 
    // window.onresize监听页面高度的变化
    window.onresize = ()=>{
        return(()=>{
            this.showHeight = document.body.clientHeight;
        })()
    }
  },
<!--3.watch比较，判断tab是否该显示出来-->
showHeight() {
      if(this.docmHeight > this.showHeight){
          this.footer=false;
          <!--以下是为了兼容样式、没有需要就不用写了-->
          this.$refs.scollElement.classList.add('page-tab-container_on');
          this.$refs.marto.classList.add('marto_on');
          var add = document.querySelectorAll('.web_kit');
          add.forEach((v,i)=>{
            v.classList.add('web_kiton');
          })
      }else{
          this.footer=true;
          <!--以下是为了兼容样式、没有需要就不用写了-->
          this.$refs.scollElement.classList.remove('page-tab-container_on');
          this.$refs.marto.classList.remove('marto_on');
          var bdd = document.querySelectorAll('.web_kit');
          bdd.forEach((v,i)=>{
            v.classList.remove('web_kiton');
          })
      }
    }
<!--4.最后再mounted/activated(需要注意换取的哪里的高度)移动端建议是可见区域-->
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

uniapp

<input type="text" :adjust-position="false"/>
//adjust-position  键盘弹起时，是否自动上推页面App-Android（vue 页面 softinputMode 为 adjustResize 时无效）、微信小程序、百度小程序、QQ小程序

小程序

//同uniapp,处理方式一样

• 都可以在input获取焦点的时候隐藏页面底部固定定位的元素，失去焦点显示。