uni-app nvue iOS中自定义播放器全屏后 list中的cell会在最顶部 z-index设置无效

在 uni-app 的 nvue 页面中，iOS 平台下使用自定义播放器全屏后，list 中的 cell 可能会出现在最顶层，即使设置了 z-index 也无法解决。这是因为 nvue 在 iOS 平台下使用的是原生渲染，而原生渲染的层级管理与 WebView 中的 z-index 有所不同。

解决方案

1. 使用 cover-view 和 cover-image
cover-view 和 cover-image 是专门用于覆盖在原生组件（如 video、map 等）之上的组件。如果你希望某些元素始终显示在播放器之上，可以将这些元素放在 cover-view 或 cover-image 中。

   <template>
     <view>
       <video id="myVideo" src="xxx" controls></video>
       <cover-view class="custom-overlay">
         <text>This will always be on top of the video</text>
       </cover-view>
     </view>
   </template>
   
   <style>
   .custom-overlay {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 9999;
   }
   </style>
   

2. 调整 list 的层级
   如果 list 中的 cell 出现在最顶层，可以尝试将 list 的 z-index 设置为一个较低的值，或者将播放器的 z-index 设置为一个较高的值。

   <template>
     <view>
       <list style="z-index: 1;">
         <cell v-for="item in items" :key="item.id">
           <text>{{ item.title }}</text>
         </cell>
       </list>
       <video id="myVideo" src="xxx" controls style="z-index: 2;"></video>
     </view>
   </template>
   

3. 使用 position 属性
   确保 list 和 video 的 position 属性正确设置。通常，position: absolute 或 position: fixed 可以更好地控制层级关系。

   <template>
     <view>
       <list style="position: relative; z-index: 1;">
         <cell v-for="item in items" :key="item.id">
           <text>{{ item.title }}</text>
         </cell>
       </list>
       <video id="myVideo" src="xxx" controls style="position: absolute; z-index: 2;"></video>
     </view>
   </template>
   

4. 动态隐藏 list
   在全屏播放时，可以考虑动态隐藏 list，以避免其出现在播放器之上。

   <template>
     <view>
       <list v-if="!isFullScreen">
         <cell v-for="item in items" :key="item.id">
           <text>{{ item.title }}</text>
         </cell>
       </list>
       <video id="myVideo" src="xxx" controls @fullscreenchange="onFullscreenChange"></video>
     </view>
   </template>
   
   <script>
   export default {
     data() {
       return {
         isFullScreen: false
       };
     },
     methods: {
       onFullscreenChange(event) {
         this.isFullScreen = event.detail.fullScreen;
       }
     }
   };
   </script>