【個人筆記】解決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 = false
      } else {
        // 顯示
        this.hideshow = true
      }
    },
  }

3.優化

• 上面已經實作了彈出鍵盤時不把tab欄頂上去，但是又有新問題…

3.1 問題1

• 在ios微信的內置瀏覽器運行時，當路由堆疊不為空時，會顯示一個前進/后退欄，這會使頁面可見高度clientHeight小于初始大小，會觸發上面隱藏按鈕的條件，導致這樣：
  第一次進入頁面正常顯示：

切換到其他頁面（this.$router.push(…)）之后再回到主頁，底部出現了前進/后退欄，自定義的tab欄消失了：

3.2 思路

• 進入頁面的時候手動往路由堆疊中push一個空的路由，這樣一進入頁面就會顯示底部的前進/后退欄，就可以獲取到正確的頁面可用高度：

mounted() {
    // 微信內置瀏覽器，默認添加一個空路由，調出前進/后退欄
    const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    if (isIOS) {
      window.history.pushState({}, 'title', '#')
    }
}

• 效果：
  第一次進入頁面：

切換到其他頁面再回傳：

• 可以正常顯示tab欄了~

3.3 問題2

• 當頁面串列較長時，往下滑到一定程度，前進/后退欄也會消失，在往上滑的時候會出現前進/后退欄，但是我們的tab欄卻沒有跟著上來，
• 我這邊的處理方法就是判斷當前高度與初始高度的差值，如果是鍵盤的話，差值在400以上，如果是微信的前進/后退欄大概是100左右，我用120來判斷：
• 當差值大于120就判斷為是鍵盤彈出，否則就不隱藏tab欄，改進getShowHeight方法

getShowHeight() {
      this.showHeight = document.documentElement.clientHeight || document.body.clientHeight
      const diff = this.docmHeight - this.showHeight
      if (this.docmHeight > this.showHeight && diff > 120) {
        // 隱藏
        this.hideshow = false
      } else {
        // 顯示
        this.hideshow = true
      }
    },

完整代碼

<template>
  <div id="app" ref="app" :class="isNeedNav?'isNeedNav':''">
    <router-view />
<!-- tab組件 -->
    <g-nav :nav-list="navList" v-show="isNeedNav && hideshow" />
  </div>
</template>

<script>
import GNav from '@/components/GNav'
export default {
  components: {
    GNav
  },
  data() {
    return {
      isNeedNav: false,
      navList: [],
      docmHeight: document.documentElement.clientHeight || document.body.clientHeight,
      showHeight: document.documentElement.clientHeight || document.body.clientHeight,
      hideshow: true // 顯示或者隱藏footer
    }
  },
  mounted() {
    // 微信內置瀏覽器，默認添加一個空路由，調出前進/后退欄
    const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    if (isIOS) {
      window.history.pushState({}, 'title', '#')
    }
    this.getShowHeight()
    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 = false
      } else {
        // 顯示
        this.hideshow = true
      }
    }
}