vue移动端安卓机上键盘弹起时把底部菜单顶起来

  1. ios和安卓的键盘弹起方式不同, ios直接弹出键盘, 不影响页面, 而安卓键盘弹起时会把页面顶起来, 这样就会把底部菜单顶起来了, 绝对定位也没用;

  2. 解决思路: 页面进来时获取默认的屏幕高度, 定义一个值, 用来监听实时屏幕的高度, 当实时屏幕高度小于默认高度时, 说明键盘弹起来了, 这时就隐藏底部菜单, 当键盘收起时, 再显示底部菜单;

  3. 具体代码:
    (1) 在data中定义默认值
    data() {
    return {
    docmHeight: document.documentElement.clientHeight, //默认屏幕高度
    showHeight: document.documentElement.clientHeight, //实时屏幕高度
    hidshow:true, //显示或者隐藏footer,
    isResize:false //默认屏幕高度是否已获取
    };
    },

    (2) 在mounted中获取屏幕高度
    mounted() {
    window.onresize = ()=>{
    return(()=>{
    if (!this.isResize) {
    //默认屏幕高度
    this.docmHeight = document.documentElement.clientHeight;
    this.isResize = true;
    }
    //实时屏幕高度
    this.showHeight = document.body.clientHeight;
    console.log(this.showHeight);
    })()
    }
    },

    (3) 用watch监听屏幕高度变化, 控制底部菜单的显示隐藏
    watch: {
    showHeight() {
    if(this.docmHeight >= this.showHeight){
    this.hidshow = false
    }else{
    this.hidshow = true
    }
    console.log(this.hidshow);
    }
    },

posted on 2019-09-25 14:19  shysun  阅读(2253)  评论(0编辑  收藏  举报