关于H5软键盘弹起盖住页面的解决方案

时隔多年，我又回来啦，哈哈哈，最近挺忙的，没时间写这些东西，今天终于把bug解决的差不多了，哈哈哈。

前两天在写H5的时候发现，在微信浏览器内打开这个网页，有输入框的时候，这个输入框很不智能，在键盘弹出的时候会把这个输入框给盖住，这就很尴尬了，，，

刚开始的时候我是在输入框onfocus的时候动态赋值这个页面的scrollTop，

<van-field
  v-model="remark"
  rows="1"
  autosize
  label="备注"
  type="textarea"
  placeholder="请输入备注"
  @focus="scrollbox"
/>
    
scrollbox(){
  //console.log(this.$refs.scrollwarp.scrollTop,this.$refs.scrollwarp.scrollHeight,'=========================')
  this.$nextTick(() => {
    this.$refs.scrollwarp.scrollTop=this.$refs.scrollwarp.scrollHeight - this.$refs.scrollwarp.clientHeight
  });
}    

发现其实他没有啥用，因为当你点击输入框的时候，它还是老样子，只有你在键盘弹起的时候将滚动条滑到最下面，然后失焦，然后获取焦点，滚动条位置才会在最下面，于是百度，window有一个监听窗口大小的事件onresize，文档上说当浏览器被重置大小时执行它:

window.onresize=function(){SomeJavaScriptCode};

于是就对我的代码进行改造：

created() {
  //这里定义窗口的原始高度
  this.oldHeight = document.documentElement.clientHeight
},
mounted(){
  let that = this;
  window.onresize = () => {
    if (that.oldHeight) {
      that.HeightChange = document.documentElement.clientHeight === that.oldHeight;
      if (!that.HeightChange) {
        this.$refs.scrollwarp.scrollTop=this.$refs.scrollwarp.scrollHeight - this.$refs.scrollwarp.clientHeight
      }
    }
  };
},

到这里，H5软键盘弹起之后就不会盖住页面上的元素啦。