uniapp調整webview的大小與位置解決遮擋問題的辦法

更新時間：2025年01月04日 10:47:28 作者：printf_824

這篇文章主要介紹了如何在uniapp中使用webview時控制其大小和位置,以避免擋住頂部內容,并提供了一個示例代碼,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

起因：

uniapp使用webview時默認的是全屏顯示

通過fullscreen="false"和webview-styles="style"兩個屬性可以控制大小，但是依然會擋住頂部的東西，只能以百分比的單位去控制寬高且無法控制位置

解決方案：

眾所周知，query.select().boundingClientRect可以獲取元素的高度，$getAppWebview可以獲取webview實例，uni.getSystemInfoSync()可以獲取屏幕高度，因此我們就可以通過控制webview定位來讓一些內容顯示出來，并且可以修改webview實例的高度，以下是我使用時的示例，僅供參考：

<view class="base_header">
			<mHeader ref="base_header"></mHeader>
		</view>
		<view class="main">
			<view class="bage_close">

				<close color="#000" ref="bage_close"></close>
			</view>

			<web-view :fullscreen="false" src="xxx"></web-view>
		</view>

onMounted(() => {
		const instance = getCurrentInstance();
		const query = uni.createSelectorQuery().in(instance);
		const {
			windowHeight
		} = uni.getSystemInfoSync(); // 屏幕高度（單位：px）
		console.log("屏幕高度:", windowHeight);
		if (instance && instance.proxy) {
			const currentWebview = instance.proxy.$scope?.$getAppWebview();
			if (currentWebview) {
				nextTick(() => {
					setTimeout(() => {
						let closeHeight = 0;
						let baseHeaderHeight = 0;

						query
							.select(".base_header")
							.boundingClientRect((res) => {
								if (res && res.height) {
									baseHeaderHeight = res.height;
								} else {
									baseHeaderHeight = 100; // 默認高度
								}
							})
							.select(".bage_close")
							.boundingClientRect((res) => {
								if (res && res.height) {
									closeHeight = res.height + 100;
								} else {
									closeHeight = 100; // 默認高度 
								}
							})
							.exec(() => {
								const totalTop = closeHeight + baseHeaderHeight;
								console.log("Calculated totalTop:", totalTop);

								const wv = currentWebview.children()?.[0];
								if (wv) {
									wv.setStyle({
										top: `${totalTop}px`,
										height: `${windowHeight-totalTop-30}px`,
										zIndex: -1,
									});
								}
							});
					}, 300);
				});
			}
		}
	});

假設遇見了點擊事件問題，記得調整內容的層級（position: relative;z-index: 1000;）