uniapp内嵌web-view，自定义导航栏不显示问题

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

✅ 问题原因

在 uni-app 中，<web-view> 默认会铺满整个页面，且层级最高，因此会遮挡您自定义的 up-navbar 导航栏。
尤其在 HarmonyOS（鸿蒙） 平台下，<web-view> 是原生组件，无法通过 z-index 或定位 来覆盖，必须使用平台支持的方案。

✅ 解决方案（按平台推荐）

✅ 推荐做法（鸿蒙端）

请将当前页面改为 .nvue 文件，并设置 flex 布局，确保 <web-view> 不会遮挡导航栏：

<!-- pages/web-view/index.nvue -->  
<template>  
  <view class="container">  
    <up-navbar :title="initData.title" :placeholder="true">  
      <template #left>  
        <up-icon name="arrow-left" size="20" @click="onBack" />  
        <up-icon class="margin-left-base" name="close" size="20" @click="onBack" />  
      </template>  
    </up-navbar>  
    <web-view class="web" :src="initData.url" />  
  </view>  
</template>  

<style>  
.container {  
  flex-direction: column;  
  flex: 1;  
}  
.web {  
  flex: 1;  
}  
</style>

⚠️ 注意：.nvue 页面中不能使用百分比布局、媒体查询等非 flex 样式，需严格遵循 nvue 样式规范。

❌ 不推荐的做法

✅ 补充建议

• 如果您必须使用 .vue 页面，建议将导航栏逻辑移至 H5 页面内部实现，并通过 postMessage 与 uni-app 通信。
• 确保 HBuilderX 版本为 4.28 或以上，以获得对鸿蒙平台的完整支持。

如需参考完整示例，可查看官方项目：hello uni-app - web-view 示例。