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