Vue 3中使用RecycleScroller出现项缓冲重叠及渲染限制报错

问题根源 #

你的报错已经点明核心问题：滚动容器没有明确的固定高度和滚动属性，导致组件无法计算可视区域范围，被迫一次性渲染所有列表项，触发Rendered items limit reached错误；同时项高度配置冲突，引发列表项重叠。

分步修复方案 #

1. 修正滚动容器样式 #

把.scroller的height: 100%替换为固定高度（或明确的相对高度），同时添加滚动属性：

.scroller {
  /* 示例：设置固定高度，可根据需求调整为400px、80vh等 */
  height: 400px;
  overflow-y: auto;
}

注意：height: 100%仅在父容器有明确固定高度时生效，否则组件无法获取有效高度，仍会触发全量渲染。

2. 统一列表项高度配置 #

你同时设置了item-height="42"和:item-size="25"，两个属性冲突，且.user的height: 32%是相对高度，会导致组件计算错误：

• 先修改.user为固定高度，与组件配置匹配：

.user {
  height: 42px; /* 和item-height值保持一致 */
  padding: 0 12px;
  display: flex;
  align-items: center;
}

• 然后删除组件上的item-size属性，保留item-height：

<RecycleScroller
  class="scroller"
  page-mode
  :items="store.clinicData.value[store.activeTabKey.value]"
  v-slot="{ item }"
  item-height="42"
  :key-field="'hsId'"
>
  <div class="user">
    <p>{{ item.name }}</p>
    <p>{{ item.hsId }}</p>
  </div>
</RecycleScroller>

3. 验证数据源稳定性 #

确认store.clinicData.value[store.activeTabKey.value]是结构稳定的数组，且每个列表项的hsId是唯一值——组件依赖唯一key值进行项的复用与渲染定位。

额外优化建议 #

• 若需自适应高度，可使用max-height搭配overflow-y: auto，例如max-height: 80vh; overflow-y: auto;
• 如果列表项高度不固定，可移除item-height，改用:item-size="(item) => 计算项高度的函数"，或启用组件的dynamic模式

内容的提问来源于stack exchange，提问作者fico