Skip to content

Latest commit

 

History

History
18 lines (10 loc) · 846 Bytes

大数据列表.md

File metadata and controls

18 lines (10 loc) · 846 Bytes

【场景设计】

大数据列表如何设计平滑滚动和加载,下滑再上滑的操作,上下两个buffer区间如何变化和加载数据。

虚拟列表实现原理:

通过监听onScroll,监听表格滚动条偏移量,节选适当数量的部分数据,进行可视区内容渲染。

通过列表的固定高度区域,并设置每列的固定高度,计算当时滚动条所停留的区域对应的哪一条数据,并预留足够的buffer,渲染数据。

buffer区域留的数据量,上面留百分之五十的数据下面留百分之五十的数据。

react-window接受的数据

  • 容器的高度,用于计算每个视图能展示多少项
  • 每项的高度 - 用于计算最终高度、滚动条停留在第几项
  • 项的数量 - 用于计算虚拟列表的最终高度,设置滚动条大小