uni-app中解决video层级过高挡住弹窗问题，使用subNVue无效，弹窗仍在video下面

uni-app中解决video层级过高挡住弹窗问题，使用subNVue无效，弹窗仍在video下面

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

示例代码：

为了解决video层级过高挡住弹窗的问题，我用了官网给的subNVue，结果不管用，弹窗还是在video下面

"app-plus": {  
    "subNVues": [{  
        "id": "content", //原生子窗体的 ID  
        "path": "page/index/index",  
        "style": {  
            "position": "popup",  
            "width": "90%",  
            "height": "auto",  
            "background": "transparent",  
            "zIndex": 1  
        }  
    }]  
}

app-plus里是这样写的，应该没问题吧，uni.getSubNVueById(‘content’).show()，调用的时候就是这样写的，不知道问题出在哪里

操作步骤：

用subNVue，让u-model弹窗覆盖video即可

预期结果：

弹窗显示在video上层

实际结果：

弹窗仍然在video下面，被video挡住


更多关于uni-app中解决video层级过高挡住弹窗问题，使用subNVue无效，弹窗仍在video下面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中解决video层级过高挡住弹窗问题，使用subNVue无效，弹窗仍在video下面的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 video 组件时，确实会遇到 video 组件层级过高的问题，导致弹窗或其他组件被 video 遮挡。虽然 subNVue 通常用于解决层级问题，但在某些情况下可能无效。以下是一些可能的解决方案：

1. 使用 cover-view 和 cover-image

cover-view 和 cover-image 是专门用于覆盖原生组件的组件（如 video、map 等）。你可以尝试将弹窗内容放在 cover-view 中。

<template>
  <view>
    <video src="your-video-url" controls></video>
    <cover-view class="popup" v-if="showPopup">
      <cover-view class="popup-content">
        <!-- 弹窗内容 -->
        <text>这是一个弹窗</text>
      </cover-view>
    </cover-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    };
  },
  methods: {
    openPopup() {
      this.showPopup = true;
    },
    closePopup() {
      this.showPopup = false;
    }
  }
};
</script>

<style>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
}
</style>

2. 使用 web-view 替代 video

如果 cover-view 不能满足需求，可以考虑使用 web-view 来嵌入视频播放器。web-view 的层级通常不会像 video 组件那样高。

<template>
  <view>
    <web-view src="your-video-url"></web-view>
    <view class="popup" v-if="showPopup">
      <view class="popup-content">
        <!-- 弹窗内容 -->
        <text>这是一个弹窗</text>
      </view>
    </view>
  </view>
</template>

3. 动态控制 video 的显示

在弹窗出现时，暂时隐藏 video 组件，弹窗关闭后再显示 video。

<template>
  <view>
    <video v-if="!showPopup" src="your-video-url" controls></video>
    <view class="popup" v-if="showPopup">
      <view class="popup-content">
        <!-- 弹窗内容 -->
        <text>这是一个弹窗</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false
    };
  },
  methods: {
    openPopup() {
      this.showPopup = true;
    },
    closePopup() {
      this.showPopup = false;
    }
  }
};
</script>
回到顶部