uni-app video组件在app层级过高问题如何解决，测试过的手机都存在这个问题

uni-app video组件在app层级过高问题如何解决，测试过的手机都存在这个问题

操作步骤：

  • 自定义导航栏，文章列表上的视频在app层级过高

预期结果：

  • 视频应该在导航栏下经过

实际结果：

  • 视频不应该附在上面
开发环境 版本号 项目创建方式
Windows Windows 10 专业版 20H2 HBuilderX
Android Android 8.0
OPPO
A57
vue
云端

更多关于uni-app video组件在app层级过高问题如何解决，测试过的手机都存在这个问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

原生控件层级过高无法覆盖的解决方案：https://uniapp.dcloud.io/component/native-component

更多关于uni-app video组件在app层级过高问题如何解决，测试过的手机都存在这个问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


针对 uni-app video 组件在 App 端层级过高、覆盖自定义导航栏的问题，这是一个已知的常见问题。其核心原因是原生 video 组件在渲染时层级最高，会覆盖所有 WebView 层级的元素（包括自定义导航栏）。

根本原因与解决方案：

  1. 使用 cover-view / cover-image 组件（推荐）
    • 原理：cover-view 和 cover-image 是专为覆盖原生组件（如 video、map、camera）而设计的视图容器。它们可以渲染在原生组件之上。
    • 方法：将你的自定义导航栏用 cover-view 重写。确保 cover-view 是 video 组件的兄弟节点，且位于其之后。
    • 代码结构示例：
      <template>
  <view>
    <!-- Video组件 -->
    <video src="..." controls></video>
    <!-- 使用cover-view包裹导航栏内容 -->
    <cover-view class="custom-navbar">
      <!-- 导航栏内容，如图标、文字 -->
      <cover-image src="/static/back.png"></cover-image>
      <cover-view>标题</cover-view>
    </cover-view>
  </view>
</template>
回到顶部