uni-app 内部调整H5页面 (webview组件),需要条件导航问题
在iOS/Android下, web-view占满了全屏,
<template>
<view>
<web-view class="mywebview" :src="pageUrl"></web-view>
</view>
</template>
此时添加一个 <u-navbar/> 在手机端不会显示,
处理办法
javascript部分:文章来源：https://www.toymoban.com/news/detail-516318.html
onReady() {
// #ifdef APP-PLUS
const currentWebview = this.$scope.$getAppWebview()
this.pageTitle = uni.getAppBaseInfo().appName
setTimeout(function() {
const top = uni.getSystemInfoSync().statusBarHeight + 44
const wv = currentWebview.children()[0]
wv.setStyle({
top
})
}, 100); //如果是页面初始化调用时，需要延时一下
// #endif
},
html部分:文章来源地址https://www.toymoban.com/news/detail-516318.html
<template>
<view>
<!-- #ifdef APP-PLUS -->
<u-navbar back-icon-color="#000000" class="navbar" :title-bold="true" title-width="300" :border-bottom="false"
title-color="#323232" title-size="36" :is-back="true" :title="pageTitle">
</u-navbar>
<!-- #endif -->
<web-view class="mywebview" :src="pageUrl"></web-view>
</view>
</template>
到了这里，关于[uni-app] web-view组件页面添加u-navbar, u-navbar无法显示问题处理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
