uniapp页面使用web-view加载网络url,导致底部组件被覆盖解决办法

本文介绍如何在uni-app中动态调整web-view组件的位置,通过使用uni.upx2px方法将upx单位转换为px单位,从而实现精确地设置web-view距离底部的距离。
<script>
	var wv;//计划创建的webview
	export default {
		onReady() {
			var px = uni.upx2px(120)
			var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
			setTimeout(function() {
				wv = currentWebview.children()[0]
				wv.setStyle({bottom:px})
			}, 1000); //如果是页面初始化调用时,需要延时一下
		}
	}
</script>

解决办法是将在页面加载时候动态设置web-view距离底部的距离,这里我底部的组件高度是120upx,所有使用uni.upx2px将upx转换为px单位,距离顶部也是同样的道理。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值