解决uniapp中video层级过高遮挡问题的终极方案

段鸿才

于 2024-09-06 23:20:53 发布

阅读量1k

点赞数 10

本文链接：https://blog.csdn.net/gitblog_09716/article/details/141977850

版权

解决uniapp中video层级过高遮挡问题的终极方案

tel_video_popup.zip项目地址:https://gitcode.com/open-source-toolkit/811dd

项目介绍

在开发uniapp应用时，开发者常常会遇到一个棘手的问题：video组件的层级过高，导致其在页面滑动时遮挡顶部导航栏，或者在弹窗出现时覆盖弹窗内容。这不仅影响了用户体验，还增加了开发的复杂性。为了解决这一问题，我们推出了一款专门针对uniapp的解决方案，通过使用subNVues来有效控制视频层级，确保视频不会遮挡重要UI元素。

项目技术分析

本项目主要利用了uniapp提供的subNVues功能。subNVues是uniapp中的一种原生子窗体，它可以在不干扰主页面布局的情况下，独立控制其层级和样式。通过在pages.json中配置subNVues，我们可以精确地调整视频组件的层级，使其不再遮挡导航栏或弹窗。

具体配置如下：

{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "uni-app",
    "navigationStyle": "custom",
    "app-plus": {
      "titleNView": false, // 禁用原生导航栏
      "subNVues": [
        {
          "id": "subnvue", // 顶部导航配置
          "path": "pages/index/subnvue",
          "type": "navigationBar"
        },
        {
          "id": "drawer",
          "path": "pages/index/drawer.nvue", // 配置分享弹窗
          "style": {
            // 弹窗样式配置
          }
        }
      ]
    }
  }
}