安卓输入框会导致position定位出现问题,因为输入框会把body页面的高度改变,定位就会产生偏差,出现样式问题。
解决方案:
控制按钮或者弹窗的显示,当输入框弹起的时候,把有定位的东西隐藏。
具体的参数可以对应的调试,方案如此。大部分机型应该都能适用
export default {
data() {
return {
docmHeight: document.documentElement.clientHeight, // 默认屏幕高度
showHeight: document.documentElement.clientHeight, // 实时屏幕高度
heightCopy: '',
timer: null
}
},
computed: {
hideShow() { //给对应的按钮或者弹窗绑定上 v-show ="hideShow"
//如果是react或者原生js可以获取dom改变style样式 display:none
// 当默认高度大于实时高度的时候,返回false,隐藏按钮或弹窗
return !(this.docmHeight > this.showHeight)
}
},
created() {
// 处理h5在安卓调起输入框时高度变化,定位失效
// 绑定resize事件,可以监听页面高度的变化
window.addEventListener('resize', () => {
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
//设置了一个heightCopy,因为有时候拿到的高度会有问题,不起作用
if (this.showHeight === this.heightCopy) {
this.showHeight = this.docmHeight
} else {
this.showHeight = document.body.clientHeight
this.heightCopy = document.body.clientHeight
}
}, 30)
})
}
}
这个没有办法避免,webview只有去迎合安卓