Vue 在手機上鍵盤把底部菜單頂上去的解決方案

ios和安卓的鍵盤的區別

• ios和安卓的鍵盤的區別彈起方式不同, ios直接彈出鍵盤, 不影響頁面, 而安卓鍵盤彈起時會把頁面頂起來, 這樣就會把底部菜單頂起來了, 絕對定位也沒用;

用了網上的一些方案，發現了一些不滿意的地方

• 具體參考了此文章：https://segmentfault.com/a/1190000014228563
• 所以自己摸了一下window的屁股

解決思路

• 頁面進來時獲取一個可以監聽屏幕高度的api，具體可以打開控制台輸入window查看, 定義一個變量用來存儲這個參數, 當實時屏幕高度小於此參數時時, 說明鍵盤彈起來了, 這時就隱藏底部菜單, 當鍵盤收起時, 再顯示底部菜單;

遇到 2 個坑

1. 開始我用了 Vue 獲取 dom 的位置offsetTop，但在手機上，菜單頂上來了，dom的位置沒有變化，原來offsetTop是絕對坐標
   • 查看了 window 的幾個參數之后找到了一個 innerHeight
2. 一個瀏覽器（Chrome）在上滑時，瀏覽器的導航欄會消失，這樣會造成innerHeight 的變化（已解決）

具體代碼實現

• 這里用一個hidden 屬性來控制

• mui-bar是mui的一個組件，上面有行代碼是position: flexd;,所以要去掉，不然hidden如果使用position: absolute;的話權重不夠。所以給這兩個屬性用同一個參數來控制，當 hidden有時mui-bar無

• 有的同學說，mui-bar沒了，樣式變了。那就把mui-bar除了position: flexd;的全部復制到hidden上

• 廢話不多說，上代碼

部分html：

<nav ref="nav" :class="{'mui-bar':!this.ishigh, 'mui-bar-tab':true,'hidden': this.ishigh}"></nav>

css代碼

• 這里用了none ，有其他需求可以按需改，如position: absolute;

.hidden {
    display: none;
}

JavaScript代碼

    data() {
        return{
            ishigh: false,
            docmHeight: 0, 
            showHeight: 0, 
        }
    },
    watch:{  // 監聽 窗口數值的變化，發生變化就執行 inputType
        showHeight: function(){
            let height = this.docmHeight * 0.2;
            let onheight = this.docmHeight - this.showHeight

            if(onheight < height){
                this.ishigh = false;
            }else{
                this.ishigh = true;
            }
        } 
    }, 
    methods: {
    mounted() {  // dom 元素構建完就執行的函數
     // 立馬獲取初始值 為了后面發生的 bug 做鋪墊
     this.docmHeight = window.innerHeight;
     // window.onresize監聽頁面高度的變化
     window.onresize = () => {
        return (() => {
            this.showHeight = window.innerHeight;
        })()
     }
  }       

方法 2 利用getBoundingClientRect()

• getBoundingClientRect()會返回一個矩形參數對象，里面記錄了被選元素的所在相對位置
• 利用這點，可以選中nav底部菜單，當被鍵盤頂起時，就可以操作它了。具體代碼，參上
• vue 獲取 dom 的方法

<nav ref="nav" :class="{'mui-bar':!this.ishigh, 'mui-bar-tab':true,'hidden': this.ishigh}"></nav>
<script type="text/javascript">
    var vm = new Vue({
        .....
        methods: {
            getdom(){
                let dom = this.$refs.nav
            }
        }
    })
</script>