其他分享
首页 > 其他分享> > uniapp里使用web-view遮挡导航顶部问题

uniapp里使用web-view遮挡导航顶部问题

作者:互联网

<template>
	<view class="page-web">
		
		<uni-nav-bar left-icon="back"  :title="title" left-text="返回" @clickLeft="navigateBack" statusBar="true"></uni-nav-bar>
		
		<view class="page-inner">
			<web-view  :src="url"></web-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '',
				title: '加载中...',
			}
		},
		mounted() {
			
		},
		methods: {
			navigateBack() {
				uni.navigateBack()
			}
		},
		onReady() {
			// #ifdef APP-PLUS
			var wv;
			var height = 0;
			
			uni.getSystemInfo({
				//成功获取的回调函数,返回值为系统信息
				success: (sysinfo) => {
					
					height = sysinfo.windowHeight; //自行修改,自己需要的高度 此处如底部有其他内容,可以直接---(-50)这种
				},
				complete: () => {}
			});
			var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
			console.log(height)
			setTimeout(function() {
				wv = currentWebview.children()[0]
				wv.setStyle({top:70,height:height})
			}, 1000); //如果是页面初始化调用时,需要延时一下
			// #endif
		},
		onLoad({
			url,
			title
		}) {
			this.url = url
			this.title = title
			
          

		
		}
	}
</script>

<style>
	.page-web {
		flex: 1;
		width: 100%;
		flex-direction: column;
	}
	
	.page-inner {
		flex: 1;
	}
</style>

  

标签:uniapp,title,url,currentWebview,height,wv,web,uni,view
来源: https://www.cnblogs.com/shanshanjiadexiaohai/p/16533001.html