0

0

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

幻夢星雲

幻夢星雲

发布时间:2025-12-13 18:25:36

|

340人浏览过

|

来源于php中文网

原创

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

blazor 怎么使用 virtualize 组件优化长列表

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

基础用法:替换 @foreach

把原来遍历集合的 @foreach 替换成 ,并指定数据源和每项模板:

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

示例:

@product.Name - @product.Price

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

当数据量极大(如百万级),不建议一次性加载全部到内存。应让 ItemsProvider 按需拉取:

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

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

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

Text-To-Song
Text-To-Song

免费的实时语音转换器和调制器

下载
  • OverscanCount:额外多渲染几项(上下各 N 行),比如设为 3 可让滚动更顺滑
  • Placeholder:在数据加载中显示骨架屏,避免空白等待

示例:


  
    
...

注意细节:避免常见坑

不支持嵌套 Virtualize 或在 flex/grid 容器中无显式高度;确保父容器有 overflow-y: auto 或由外层滚动控制;ItemsProvider 中不要做耗时同步操作;若项高度不一致,虚拟化仍能工作,但滚动条位置可能不够精确(此时可配合 ItemSize 预估平均高度提升精度)。

基本上就这些。用对 Virtualize,万级列表也能丝滑滚动,不复杂但容易忽略高度和数据源模式这两个关键点。

相关专题

更多
counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

197

2023.11.20

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

42

2025.12.04

DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

3012

2024.08.14

overflow什么意思
overflow什么意思

overflow是一个用于控制元素溢出内容的属性,当元素的内容超出其指定的尺寸时,overflow属性可以决定如何处理这些溢出的内容。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1734

2024.08.15

flex教程
flex教程

php中文网为大家带来了flex教程合集,Flex是采用Flex布局的元素,称为Flex容器(flex container),简称"容器",它的所有子元素自动成为容器成员,有三个核心概念: flex项,需要布局的元素;flex容器,其包含flex项;排列方向,这决定了flex项的布局方向。php中文网还为大家带来flex的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

357

2023.06.14

数据库三范式
数据库三范式

数据库三范式是一种设计规范,用于规范化关系型数据库中的数据结构,它通过消除冗余数据、提高数据库性能和数据一致性,提供了一种有效的数据库设计方法。本专题提供数据库三范式相关的文章、下载和课程。

346

2023.06.29

如何删除数据库
如何删除数据库

删除数据库是指在MySQL中完全移除一个数据库及其所包含的所有数据和结构,作用包括:1、释放存储空间;2、确保数据的安全性;3、提高数据库的整体性能,加速查询和操作的执行速度。尽管删除数据库具有一些好处,但在执行任何删除操作之前,务必谨慎操作,并备份重要的数据。删除数据库将永久性地删除所有相关数据和结构,无法回滚。

2074

2023.08.14

vb怎么连接数据库
vb怎么连接数据库

在VB中,连接数据库通常使用ADO(ActiveX 数据对象)或 DAO(Data Access Objects)这两个技术来实现:1、引入ADO库;2、创建ADO连接对象;3、配置连接字符串;4、打开连接;5、执行SQL语句;6、处理查询结果;7、关闭连接即可。

347

2023.08.31

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

27

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
c语言项目php解释器源码分析探索
c语言项目php解释器源码分析探索

共7课时 | 0.4万人学习

光速学会docker容器
光速学会docker容器

共33课时 | 1.9万人学习

PHP WEB 项目实战
PHP WEB 项目实战

共16课时 | 1.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号