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大小与位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS生成随机打乱数组的方法示例

    JS生成随机打乱数组的方法示例

    这篇文章主要介绍了JS生成随机打乱数组的方法,涉及javascript数组随机排序的相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • JS实现的合并两个有序链表算法示例

    JS实现的合并两个有序链表算法示例

    这篇文章主要介绍了JS实现的合并两个有序链表算法,结合实例形式分析了JavaScript链表的定义、节点插入、删除、查找等相关算法实现技巧,需要的朋友可以参考下
    2019-02-02
  • js 弹出对话框(遮罩)透明,可拖动的简单实例

    js 弹出对话框(遮罩)透明,可拖动的简单实例

    下面小编就为大家带来一篇js 弹出对话框(遮罩)透明,可拖动的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 理解JavaScript变量作用域更轻松

    理解JavaScript变量作用域更轻松

    变量作用域是每门编程语言都会涉及的话题,也是作为一名程序员必需掌握的知识点,能深入掌握变量作用域更有助于你编写稳定的程序。
    2009-10-10
  • 一次JavaScript正则的诡异经历记录

    一次JavaScript正则的诡异经历记录

    正则表达式是用于匹配字符串中字符组合的模式,下面这篇文章主要给大家介绍了一次JavaScript正则的诡异经历记录,文中通过实例介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • JS创建Tag标签的方法详解

    JS创建Tag标签的方法详解

    这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • webpack打包非模块化js的方法

    webpack打包非模块化js的方法

    本文主要记录了非模块化js如何使用webpack打包,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • asp.net和asp下ACCESS的参数化查询

    asp.net和asp下ACCESS的参数化查询

    最近因项目需要用ACCESS做数据库开发WEB项目看论坛上还许多人问及ACCESS被注入的安全问题 许多人解决的方法仍然是用Replace替换特殊字符,然而这样做也并没有起到太大做用
    2008-06-06
  • JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

    JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

    本文结合Bootstrap table的父子表和行列调序的用法再来介绍下它稍微高级点的用法。对bootstrap表格组件相关知识感兴趣的朋友一起学习吧
    2016-05-05
  • JS 中forEach,for in、for of用法实例总结

    JS 中forEach,for in、for of用法实例总结

    这篇文章主要介绍了JS 中forEach,for in、for of用法,结合实例形式总结分析了JS 中forEach,for in、for of的基本功能、使用方法与相关注意事项,需要的朋友可以参考下
    2023-05-05

最新评论