我的第一篇博客

#在51CTO的第一篇博文#

很高兴成为51CTO的一员，今天来发表我的第一篇博客啦

我是一枚前端开发程序媛，最近在做Vue H5+app的项目，遇到了很多适配问题，分享一个适配问题的解决心得

Android环境下，输入框获取焦点之后，弹出软键盘会将底部tab或者固定的按钮挤到上面，遮挡住输入框，主要是因为底部tab和按钮使用的都是position:fixed或者absolute定位

解决方案：

安卓环境下，在页面加载的时候监听浏览器可视区域的高度
// 安卓环境下 fixed定位会被软键盘顶上去 通过监听高度变化
    if (this.$isAndroid()) {
      // 获取浏览器可视区域高度
      this.docmHeight = document.documentElement.clientHeight // document.body.clientWidth;
      window.onresize = () => {
        // 在窗口或框架被调整大小时触发
        return (() => {
          this.nowHeight = document.documentElement.clientHeight
        })()
      }
    }



    watch: {
        // 安卓环境下 如果 clientHeight 发生改变，这个函数就会运行 
        nowHeight: function () {
          if (this.$isAndroid()) {
          //这里我是全局监听，将是否变化的状态存在了vuex里面，可能多个页面需要用到
            if (this.docmHeight != this.nowHeight) {
              this.$store.commit('home/SET_HEIGHTCHANGE', true)
            } else {
              this.$store.commit('home/SET_HEIGHTCHANGE', false)
            }
          }
        }
    }


    具体使用页面：
     watch: {
        heightIsChange: function (val) {
          // 安卓环境下监听变化 通过this.show控制固定的按钮或者底部tab隐藏或者显示
          if (this.$isAndroid()) {
            this.show = val ? false : true
          }
        }
    },
    computed: {
    ...mapGetters(['heightIsChange'])
    }

这就是我的解决方案啦，如果小伙伴有同样的问题或者有更好的方案欢迎私信我哦~