uniapp 内嵌 webview 客服网页，呼出键盘遮挡输入框问题解决记录
uni-app
有很多情况需要在app端内嵌一个H5客服网页，但这个页面一般都是有打字的需求，但由于大部分情况下网页都是默认铺满整个画面，导致键盘弹出时出现遮挡输入框的问题。
直接上代码：
javascript
<template>
<view class="service-container">
<view class="content">
// 这里正常引入webview
<web-view :src="url">
</web-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
url: '', // 网址
height: 0, // 页面高度
barHeight: 0, // 状态栏高度
kbHeight: 0 // 键盘高度
};
},
onLoad() {
this.url = ‘xxxxxxx’;
// 这里是为了用原生的导航栏遮挡H5客服页面的头部，因为大部分客服页面都没有返回键
setTimeout(() => {
uni.setNavigationBarTitle({
title: '在线客服'
})
}, 1000)
console.log(this.url);
},
onShow() {
// 监听键盘高度变化
uni.onKeyboardHeightChange((obj) => {
// 获取系统信息
let _sysInfo = uni.getSystemInfoSync();
let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
let _diff = obj.height - _heightDiff
// 键盘高度
this.kbHeight = (_diff > 0 ? _diff : 0) - 2;
})
// 同时监听页面变化
uni.onWindowResize(res => {
console.log(res);
if (res.size.windowHeight < this.height) {
setTimeout(() => {
this.wv.setStyle({
top: this.barHeight,
// webview的高度动态修改为减去键盘高度后的
height: this.height - this.kbHeight,
bottom: 0
})
}, 100)
} else {
setTimeout(() => {
this.wv.setStyle({
top: this.barHeight,
// 这里可以根据自己情况微调
height: this.height + 60,
bottom: 0
})
}, 100)
}
})
},
onReady() {
// 首次进入页面时，webview高度 = 整个页面高度
let currentWebview = this.$scope.$getAppWebview();
uni.getSystemInfo({
success: res => {
this.height = res.windowHeight;
setTimeout(() => {
this.wv = currentWebview.children()[0];
this.wv.setStyle({
top: this.barHeight,
height: this.height + 60,
bottom: 0
});
}, 100);
}
});
}
};
</script>
<style lang="scss">
.service-container {
background-color: #f2f5ff;
}
</style>
