uniapp 内嵌 webview 客服网页，呼出键盘遮挡输入框问题解决记录_uniapp webview 键盘遮挡

有很多情况需要在app端内嵌一个H5客服网页，但这个页面一般都是有打字的需求，但由于大部分情况下网页都是默认铺满整个画面，导致键盘弹出时出现遮挡输入框的问题。

直接上代码：

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91