ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-07-29 17:35:18  阅读:211  来源: 互联网

标签:uniapp title url currentWebview height wv web uni 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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有