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

这篇具有很好参考价值的文章主要介绍了uniapp 内嵌 webview 客服网页，呼出键盘遮挡输入框问题解决记录。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

直接上代码：文章来源地址https://www.toymoban.com/news/detail-740143.html

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

到了这里，关于uniapp 内嵌 webview 客服网页，呼出键盘遮挡输入框问题解决记录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！