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

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

图1
图2

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

解决方案(本例是在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
      })()
    }
  },
展开阅读全文

没有更多推荐了,返回首页