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

相关推荐
华玥作者21 小时前
Vue 3 + TypeScript + uni-app 组件库推荐:hy-app(华玥组件库)
vue.js·typescript·uni-app
FinelyYang21 小时前
uniapp使用kkfileview在线预览ppt,excel,word,pdf类型文件
pdf·uni-app·powerpoint
2501_916008891 天前
iPhone 设备信息查看,用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
ModyQyW2 天前
vite-plugin-uni-manifest 0.7:在 uni-app 读取之前生成
前端·uni-app
lyz2468592 天前
uniapp vue3 小程序开发注意事项
uni-app
雪芽蓝域zzs2 天前
WebStorm Uniapp Support + Uniapp Tool + Uniappx Language Service讲解
vue.js·uni-app·webstorm
普通人62 天前
Web端3D模型加载实战指南_Vue3_uni-app_HTML
前端·javascript·uni-app·html
PedroQue994 天前
0.8.2 新增 backFallback 配置,无 tabbar 页返回无忧
前端·uni-app
PedroQue994 天前
v0.2.0 架构升级:class + reactive 重塑状态管理
前端·uni-app
CHB6 天前
别再问uni-app x蒸汽模式是否成熟了,已经有大量App案例上架应用商店了
uni-app