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;)

总结

到此这篇关于uniapp调整webview的大小与位置解决遮挡问题的文章就介绍到这了,更多相关uniapp调整webview大小与位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript数组的栈方法与队列方法详解

    JavaScript数组的栈方法与队列方法详解

    这篇文章主要介绍了JavaScript数组的栈方法与队列方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • JavaScript实现动态添加,删除行的方法实例详解

    JavaScript实现动态添加,删除行的方法实例详解

    这篇文章主要介绍了JavaScript实现动态添加,删除行的方法,较为详细的分析了javascript操作table表格实现针对表格元素动态操作的相关技巧,需要的朋友可以参考下
    2015-07-07
  • 微信小程序sessionid不一致问题解决

    微信小程序sessionid不一致问题解决

    这篇文章主要介绍了微信小程序sessionid不一致问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • js实现的后台左侧管理菜单代码

    js实现的后台左侧管理菜单代码

    这篇文章主要介绍了js实现的后台左侧管理菜单代码,可实现美观大气的左侧折叠菜单效果,涉及JavaScript基于鼠标事件动态操作页面元素样式变换的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-09-09
  • JS中用try catch对代码运行的性能影响分析

    JS中用try catch对代码运行的性能影响分析

    要捕获JavaScript代码中的异常一般会采用 try catch,不过try catch的使用是否是对代码性能产生影响呢?答案是肯定有的,但是有多少不得而知。下面这篇文章就给大家详细介绍了在JS中用try catch对代码运行的性能影响,有需要的朋友们可以参考借鉴。
    2016-12-12
  • 微信小程序中的数据存储实现方式

    微信小程序中的数据存储实现方式

    这篇文章主要介绍了微信小程序中的数据存储实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-08-08
  • JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码

    JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码

    DIV层最小化和随意拖拽排序,很多的爱好者都想实现这个功能,小编整理搜集了一下,希望本文的知识点可以帮助到你
    2013-02-02
  • JS函数式编程之纯函数、柯里化以及组合函数

    JS函数式编程之纯函数、柯里化以及组合函数

    这篇文章主要介绍了JS函数式编程之纯函数、柯里化以及组合函数,文章对三个函数进行分析讲解,内容也很容易理解,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-01-01
  • JavaScript原型链与继承操作实例总结

    JavaScript原型链与继承操作实例总结

    这篇文章主要介绍了JavaScript原型链与继承操作,结合实例形式总结分析了javascript原形链与继承的相关概念、使用方法及操作注意事项,需要的朋友可以参考下
    2018-08-08
  • javascript设计模式 – 模板方法模式原理与用法实例分析

    javascript设计模式 – 模板方法模式原理与用法实例分析

    这篇文章主要介绍了javascript设计模式 – 模板方法模式原理,结合实例形式分析了javascript模板方法模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04

最新评论