解决uniapp中video层级过高遮挡问题

解决uniapp中video层级过高遮挡问题

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

描述

在uniapp项目中，经常会遇到video组件层级过高的问题，导致页面滑动时video遮挡顶部导航栏，或者页面有弹窗效果时，视频也会遮挡弹窗。本资源文件提供了一种解决方案，通过使用subNVues来解决这一问题。

解决方案

在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": {
            // 弹窗样式配置
          }
        }
      ]
    }
  }
}

使用方法

1. 在pages.json中添加上述配置。
2. 根据实际需求，调整subNVues的id、path和style属性。
3. 运行项目，查看效果。

注意事项

• subNVues是uniapp提供的一种原生子窗体，可以用于解决层级遮挡问题。
• 配置时需确保path路径正确，且对应的nvue文件存在。
• 可以根据实际需求，进一步调整style属性，以达到最佳效果。

贡献

欢迎提交问题和改进建议，帮助我们完善这个解决方案。

许可证

本项目采用MIT许可证，详情请参阅LICENSE文件。

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