本文介绍在uniapp中使用webview时，默认全屏显示可能导致内容被遮挡的问题。通过设置fullscreen="false"和webview-styles属性，结合query.select().boundingClientRect获取元素高度、$getAppWebview获取实例以及uni.getSystemInfoSync()获取屏幕高度，动态调整webview的高度和位置，解决遮挡问题。
起因：
在uniapp开发中，使用webview组件时，默认情况下它会以全屏模式进行显示。
虽然可以通过设置fullscreen="false"和webview-styles="style"这两个属性来控制webview的大小，但这种方法仍然无法完全解决顶部内容被遮挡的问题。此外，这种方式只能以百分比的形式控制宽高，且无法精确控制webview的位置。
解决方案：
众所周知，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;）
总结
到此这篇关于uniapp调整webview的大小与位置解决遮挡问题的文章就介绍到这了,更多相关uniapp调整webview大小与位置内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！