欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 美食 > uniapp调整webview的大小与位置,解决遮挡问题

uniapp调整webview的大小与位置,解决遮挡问题

2025/5/24 18:58:42 来源:https://blog.csdn.net/m0_49083276/article/details/143891585  浏览:    关键词: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;)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词