【个人笔记】解决fixed布局，安卓软键盘会顶起底部固定的按钮的问题

1.问题

• fixed布局的tab栏在安卓浏览器上，聚焦在输入框时，弹出的输入框会将tab栏顶到输入框上方，挡住页面。
• fixed定位的tab栏
  
• 出现的键盘将tab栏顶到页面中间
  

2.思路

• 监听键盘弹出的事件…也就是监听页面的可见高度clientHeight
• 先保存页面最初的可见高度，然后监听高度变化（resize），当新的高度小于原来的高度时，判断是键盘弹出
• 键盘弹出时将tab栏隐藏起来
• 实现效果

• 代码如下，在全局（app.vue）添加

mounted() {
   
  window.addEventListener('resize', this.getShowHeight)
  },
beforeDestroy() {
   
    window.removeEventListener('resize', this.getShowHeight)
  },
methods: {
   
    getShowHeight() {
   
      this.showHeight = document.documentElement.clientHeight || document.body.clientHeight
      const diff = this.docmHeight - this.showHeight
      if (this.docmHeight > this.showHeight && diff > 120) {
   
        // 隐藏
        this.hideshow