起因:
uniapp使用webview时默认的是全屏显示
通过fullscreen="false"和webview-styles="style"两个属性可以控制大小,但是依然会挡住顶部的东西,只能以百分比的单位去控制宽高且无法控制位置
解决方案:
众所周知,query.select().boundingClientRect可以获取元素的高度,$getAppWebview可以获取webview实例,uni.getSystemInfoSync()可以获取屏幕高度,因此我们就可以通过控制webview定位来让一些内容显示出来,并且可以修改webview实例的高度,以下是我使用时的示例,仅供参考:
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;)