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

相关推荐
海鸥两三6 小时前
uniapp 小程序引入 uview plus 框架,获得精美的UI框架
前端·vue.js·ui·小程序·uni-app
郑州光合科技余经理16 小时前
乡镇外卖跑腿小程序开发实战:基于PHP的乡镇同城O2O
java·开发语言·javascript·spring cloud·uni-app·php·objective-c
2501_916008891 天前
iOS 跨平台开发实战指南,从框架选择到开心上架(Appuploader)跨系统免 Mac 发布全流程解析
android·macos·ios·小程序·uni-app·iphone·webview
QuantumLeap丶2 天前
《uni-app跨平台开发完全指南》- 06 - 页面路由与导航
前端·vue.js·uni-app
用户9714171814272 天前
uniapp页面路由
vue.js·uni-app
Kingsaj2 天前
uni-app打包app -- 在用户首次启动 App 时,强制弹出一个“用户协议与隐私政策”的确认对话框。
服务器·ubuntu·uni-app
Vue10242 天前
uniapp 使用renderjs 封装 video-player 视频播放器, html5视频播放器-解决视频层级、覆盖、播放卡顿
uni-app·音视频·html5
钱端工程师2 天前
uniapp封装uni.request请求,实现重复接口请求中断上次请求(防抖)
前端·javascript·uni-app
茶憶2 天前
uni-app app移动端实现纵向滑块功能,并伴随自动播放
javascript·vue.js·uni-app·html·scss
dcloud_jibinbin2 天前
【uniapp】解决小程序分包下的json文件编译后生成到主包的问题
前端·性能优化·微信小程序·uni-app·vue·json