移动端安卓系统键盘弹起再收起页面无法滚动问题
首先,要在安卓系统出现这种情况经过我反复测试需要满足两种情况,才会触发:1、最外层样式高度使用100vh;2、页面内容高度没有撑满一屏;解决方式:通过监听键盘弹起、收缩来更改高度值html<div class="wrapper"><div class="prob_sugg_detail contain_main" ref="main"><van-tabsv-model
·
首先,要在安卓系统出现这种情况经过我反复测试需要满足两种情况,才会触发:
1、最外层样式高度使用100vh;
2、页面内容高度没有撑满一屏;
解决方式:
通过监听键盘弹起、收缩来更改高度值
html
<div class="wrapper">
<div class="prob_sugg_detail contain_main" ref="main">
<van-tabs
v-model="active"
scrollspy
sticky
type="card"
background="#E5E6E7"
color="#ffffff"
title-active-color="#2F3033"
class="my_tabs"
>
</van-tabs>
</div>
</div>
js
mounted() {
this.keyboardListener();
},
// 一定要记得移除监听啊
beforeDestroy() {
window.removeEventListener("resize", this.judgeKeyboardState);
},
// 监听键盘
keyboardListener() {
this.originHeight = document.documentElement.clientHeight || documentElement.body.clientHeight;
window.addEventListener("resize", this.judgeKeyboardState);
},
// 判断是键盘弹起还是收起
judgeKeyboardState() {
const resizeHeight = document.documentElement.clientHeight ||
documentElement.body.clientHeight;
var u = navigator.userAgent;
let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
if (isAndroid) {
if (resizeHeight < this.originHeight) {
// 键盘弹起
document.querySelector('.wrapper').setAttribute('style', 'height:100vh;')
} else {
// 键盘收起
this.$refs.toolbar.$refs.search.blur();
if (this.$el.querySelector(".van-tabs__content").scrollHeight < this.$refs.main.clientHeight) {
document.querySelector('.wrapper').setAttribute('style', 'height:' + this.originHeight + 'px;')
} else {
document.querySelector('.wrapper').setAttribute('style', 'height:100vh;')
}
}
}
},
参考来源https://www.jianshu.com/p/e0408b1d57ac
更多推荐
已为社区贡献2条内容
所有评论(0)