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: 'inputType'  
    }, 
    methods: {
        inputType() {
            //  这里为什么要做一个 0.2 的缓冲呢，以为有些浏览器上滑会把
            // 顶部导航栏隐藏掉，说的就是你（Chrome）
            let height = this.docmHeight * 0.2;

            if(this.docmHeight - this.showHeight < height){
                this.ishigh = false;
            }else{
                this.ishigh = true;
            }
    }, 
    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>

Vue 在手机上键盘把底部菜单顶上去的解决方案