vue移动端安卓机上键盘弹起时把底部菜单顶起来
ios和安卓的键盘弹起方式不同, ios直接弹出键盘, 不影响页面, 而安卓键盘弹起时会把页面顶起来, 这样就会把底部菜单顶起来了, 绝对定位也没用;
解决思路: 页面进来时获取默认的屏幕高度, 定义一个值, 用来监听实时屏幕的高度, 当实时屏幕高度小于默认高度时, 说明键盘弹起来了, 这时就隐藏底部菜单, 当键盘收起时, 再显示底部菜单;
具体代码:
(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);
}
},