Blazor 怎么使用 Virtualize 组件优化长列表

Blazor Virtualize 组件通过虚拟滚动仅渲染可视区域项，避免全量 DOM 创建，解决长列表卡顿等问题；需设固定高度容器、用 Items 或 ItemsProvider 绑定数据源，并可配置 OverscanCount 和 Placeholder 优化体验。

Blazor 的 Virtualize 组件通过“虚拟滚动”只渲染可视区域内的项，大幅减少 DOM 元素数量，解决长列表卡顿、内存占用高、首次加载慢等问题。关键不是“全量渲染后隐藏”，而是根本不去创建不可见项的 DOM。

基础用法：替换 @foreach

把原来遍历集合的 @foreach 替换成 <virtualize></virtualize>，并指定数据源和每项模板：

• 用 Items="@items" 绑定可枚举集合（支持 IEnumerable、IQueryable、Array）
• 用 ItemContent 模板定义单个条目结构，内部用 @context 访问当前项
• 容器需有固定高度（如 style="height: 500px;"），否则无法计算可视区域

示例：

<p style="height: 500px;">
  <Virtualize Items="@products" Context="product">
    <p class="list-item">@product.Name - @product.Price</p>
  </Virtualize>
</p>

登录后复制

提升性能：配合分页式数据源

当数据量极大（如百万级），不建议一次性加载全部到内存。应让 ItemsProvider 按需拉取：

• 设置 ItemsProvider="@LoadProductsAsync"，替代 Items
• 方法签名必须是 ValueTask<itemsproviderresult>> Func<itemsproviderrequest valuetask>>></itemsproviderrequest></itemsproviderresult>
• 从 request.StartIndex 和 request.Count 算出数据库分页参数（如 OFFSET ... LIMIT ...）
• 返回 new ItemsProviderResult<t>(data, totalItemCount)</t>，其中 totalItemCount 用于滚动条比例计算

优化体验：设置占位与缓冲区

默认只渲染刚好可见的项，快速滚动时可能白屏或闪烁。加两个属性改善：

标签： 虚拟化 内存占用 overflow