有很多情況需要在app端內(nèi)嵌一個H5客服網(wǎng)頁，但這個頁面一般都是有打字的需求，但由于大部分情況下網(wǎng)頁都是默認(rèn)鋪滿整個畫面，導(dǎo)致鍵盤彈出時出現(xiàn)遮擋輸入框的問題。

直接上代碼：文章來源地址http://www.zghlxwxcb.cn/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: '',  // 網(wǎng)址
				height: 0, // 頁面高度
				barHeight: 0, // 狀態(tài)欄高度
				kbHeight: 0 // 鍵盤高度
			};
		},
		onLoad() {
			
			this.url = ‘xxxxxxx’;
			// 這里是為了用原生的導(dǎo)航欄遮擋H5客服頁面的頭部，因為大部分客服頁面都沒有返回鍵
				setTimeout(() => {
					uni.setNavigationBarTitle({
						title: '在線客服'
					})
				}, 1000)
				console.log(this.url);
		},
		onShow() {
			//  監(jiān)聽鍵盤高度變化
			uni.onKeyboardHeightChange((obj) => {
				// 獲取系統(tǒng)信息
				let _sysInfo = uni.getSystemInfoSync();
				let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
				let _diff = obj.height - _heightDiff
				// 鍵盤高度
				this.kbHeight = (_diff > 0 ? _diff : 0) - 2;
			})
		// 同時監(jiān)聽頁面變化
			uni.onWindowResize(res => {
				console.log(res);
				if (res.size.windowHeight < this.height) {
					setTimeout(() => {
						this.wv.setStyle({
							top: this.barHeight,
							// webview的高度動態(tài)修改為減去鍵盤高度后的
							height: this.height - this.kbHeight,
							bottom: 0
						})
					}, 100)
				} else {
					setTimeout(() => {
						this.wv.setStyle({
							top: this.barHeight,
							// 這里可以根據(jù)自己情況微調(diào)
							height: this.height + 60,
							bottom: 0
						})
					}, 100)
				}
			})
		},
		onReady() {
			// 首次進(jìn)入頁面時，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>

到了這里，關(guān)于uniapp 內(nèi)嵌 webview 客服網(wǎng)頁，呼出鍵盤遮擋輸入框問題解決記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！