uni-app List装video组件滚动多了溢出，出现WX_RENDER_ERR_LAYER_OVERFLOW错误：Layer overflow limit error 20 layers

回复 a***@helloyun.cn: 问题是有些情况不复现不了。依赖场景 你截图报的是层级越界了，得看你具体代码结构

https://ext.dcloud.net.cn/plugin?id=1006
这个有个示例，你可以下载研究一下，不知道为啥他这个可以一直渲染video标签，如果找到问题了希望可以告诉我一下，我也被这个问题困扰好久了

在 uni-app 中使用 <list> 或 <scroll-view> 内嵌大量 <video> 组件时，出现 WX_RENDER_ERR_LAYER_OVERFLOW 错误，是因为微信小程序底层对渲染层数量有硬性限制（通常为 20 层）。每个 <video> 组件在小程序中会单独占用一个渲染层，当快速滚动导致同时存在的视频组件层数超过限制时，就会触发此错误。

核心解决方案是减少同时渲染的 <video> 组件数量，常用方法如下：

1. 使用 wx.createVideoContext 进行视频实例管理
   通过 createVideoContext 动态控制视频播放，避免每个 <video> 组件长期占用渲染层。可以在滚动时暂停不可见区域的视频，并销毁其上下文，减少活跃层数。

2. 列表项复用与懒加载
   在 <list> 或自定义滚动区域中，通过 onScroll 事件监听滚动位置，结合 uniapp 的 <recycle-list>（如支持）或手动实现虚拟列表，仅渲染可视区域及附近的少量 <video> 组件。非可视区域的视频组件用 <image> 等轻量组件替代。

3. 优化 video 组件属性
   设置 lazy-load 属性为 true，延迟视频加载；在滚动时通过 v-if 或 :show 动态隐藏不可见的视频组件，直接移除节点而非仅隐藏。

4. 降低同时播放的视频数量
   确保同一时刻只有一个视频处于播放状态，可通过全局管理播放状态，在播放新视频时暂停其他视频。

5. 分页加载数据
   如果列表数据量极大，采用分页加载，避免一次性渲染过多 <video> 组件。

示例代码片段（基于 scroll-view 动态控制）：

<scroll-view @scroll="handleScroll">
  <view v-for="(item, index) in visibleList" :key="item.id">
    <video 
      v-if="isVideoVisible(index)" 
      :src="item.src" 
      :id="'video-' + item.id"
      lazy-load
    />
    <image v-else :src="item.poster" />
  </view>
</scroll-view>

export default {
  data() {
    return {
      visibleRange: { start: 0, end: 5 } // 仅渲染可视区域附近5个视频
    }
  },
  methods: {
    handleScroll(e) {
      // 计算当前可视区域索引，更新 visibleRange
      // 通过 wx.createVideoContext 管理视频播放/暂停
    }
  }
}