移动端键盘弹起导致底部按钮上浮解决方案

问题描述：移动端页面输入框聚焦伴随着键盘弹起，底部按钮浮到键盘上方，此时如果直接点击底部按钮进行查询操作，进入到的下一页的列表页面高度渲染会出现问题。

解决思路：在键盘弹起时，不让原本固定在底部的按钮自动浮起。监听屏幕的实时高度，控制底部按钮的显示与否，从而达到按钮固定在底部的效果。

解决方案（本例是在vue框架下实现的解决方案代码）：

html部分：

<div v-show="hidShow"><query-bar @handleReset="handleReset" @handleQuery="handleQuery" /></div>

data部分：

data () {
    docmHeight: document.documentElement.clientHeight, // 默认屏幕高度
    showHeight: document.documentElement.clientHeight, // 实时屏幕高度
    hidShow: true, // 显示或者隐藏footer
}

监听屏幕实时高度：

watch: {
    showHeight: function () {
      if (this.docmHeight > this.showHeight) {
        this.hidShow = false
      } else {
        this.hidShow = true
      }
    },
  },

mounted周期：

mounted () {
    let vm = this
    // window.resize监听页面高度的变化
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight
      })()
    }
  },