uni-app在组件中内嵌webView,实现自定义webView的大小,并处理页面中有webview时其他元素点击事件失效的问题

uni-app在组件中内嵌webView,实现自定义webView的大小,并处理页面中有webview时其他元素点击事件失效的问题

uni-app在组件中内嵌webView,实现自定义webView的大小

javascript 复制代码
setWebviewTop() {
	// #ifdef APP-PLUS
	var currentWebview = this.$scope.$getAppWebview()
	setTimeout(function() {
		let wv = currentWebview.children()[0]
		wv.setStyle({
			top: 150
		})
	}, 1000); //如果是页面初始化调用时,需要延时一下
	// #endif
},

页面中有webview时其他元素点击事件失效的问题

webView包一层盒子设置fixed定位空出上面的内容.

javascript 复制代码
<view class="web-view-wrap">
	<web-view :src="webviewUrl" @message="handleMessage" :update-title="false"></web-view>
</view>
.web-view-wrap {  
    position: fixed;  
    top: 280px;  
}

参考链接

链接1
链接2
链接3

相关推荐
Fate_I_C17 小时前
uniappx 鸿蒙运行包制作失败
华为·uni-app·uniapp·harmonyos
chQHk57BN18 小时前
跨平台前端开发:用Flutter和UniApp一次编写多端运行
flutter·uni-app
自然 醒1 天前
uni-app开发微信小程序,如何使用towxml去渲染md格式和html标签格式的内容?
微信小程序·uni-app·html
CHB1 天前
uni-agent,你的数字员工来了
人工智能·uni-app·vibecoding
h_jQuery1 天前
uniapp使用canvas实现逐字书写任意文字内容,后合成一张图片提交
前端·javascript·uni-app
困困的果果头1 天前
【uniapp】解决H5嵌套在web-view中时打包页面与状态栏重叠
前端·uni-app
前端 贾公子1 天前
Uniapp 使用 UQRCode 创建二维码
uni-app
Rattenking1 天前
uni-app组件开发----自定义数字键盘组件
前端·javascript·uni-app
笨笨狗吞噬者1 天前
代理的妙用:uni-app 小程序是怎样用 `Proxy` 和 `wrapper` 抹平平台差异的
前端·微信小程序·uni-app
软希网分享源码3 天前
中英双语言量化交易投资源码/跟单搬砖区块链交易所源码/前端uniapp纯源码+后端
前端·uni-app·区块链·中英双语言量化交易投资源码