记原生键盘弹起导致的H5页面压缩变形问题
方案一:监听页面变化,动态的展示和隐藏底部被顶上来的内容
原文参考:https://www.cnblogs.com/belongs-to-qinghua/p/12192846.html
data() {
return {
docmHeight: document.documentElement.clientHeight ||document.body.clientHeight,
showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
hideshow:true //显示或者隐藏footer
}
},
watch: {
//监听显示高度
showHeight:function() {
if(this.docmHeight > this.showHeight){
//隐藏
this.hideshow=false
}else{
//显示
this.hideshow=true
}
}
},
mounted() {
//监听事件
window.onresize = ()=>{
return(()=>{
this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
})()
}
}
方案二:监听页面变化,键盘弹起时将变化之前的高度赋值给压缩后的页面
原文参考:https://blog.csdn.net/chenlim87/article/details/108234974?utm_medium=distribute.pc_relevant.none-task-blog-title-4&spm=1001.2101.3001.4242
// 获取当前可视区域的高度
mounted() {
let height = document.documentElement.clientHeight
window.onresize = () => {
// 在页面大小发生变化时调用
// 把获取到的高度赋值给根div
document.getElementById('loginMain').style.height = height + 'px'
}
}