在两个方向,顶部和底部反应虚拟化InfiniteLoader

时间:2017-08-28 11:14:28

标签: infinite-scroll react-virtualized

如何在两个方向上,向上和向下进行无限滚动。我使用的是InfiniteLoader和List,它们都是反应虚拟化的组件。我有一个带有初始日期时间范围的时间戳列表。从那里列表应该在两个方向上是无限的。目前,向下滚动到List的底部将触发函数_loadMoreRows()。但是,我想在向上滚动时触发具有相同功能的_loadMoreRows()。

1 个答案:

答案 0 :(得分:5)

我现在有效:)一切都很好。 threshold的{​​{1}}道具定义了<InfiniteLoader>何时预取数据的开始/结束前的索引阈值数,即触发List

_loadMoreRows()中的第一项和最后一项在初始数据提取后应将其this.state.items设置为loadedRowsMap

undefined

在显示列表之前, const items = _getItems(); // fetch items const rowCount = items.length; const loadedRowsMap = []; _.map(this.state.loadedRowsMap,(row,index)=>{ const status = (index===0 || index===rowCount-1) ? undefined : STATUS_LOADED; loadedRowsMap.push(status)}); scrollToIndex = parseInt(rowCount/2,10); this.setState({ items, rowCount, loadedRowsMap, scrollToIndex, }); 组件的scrollToIndex道具应设置为列表的中间位置,即<List>。这个数字应该满足等式

rowCount/2

功能 0 + threshold < scrollToIndex < rowCount - 1 - threshold. 会检查_isRowLoaded()。如果设置为loadedRowsMap[index]STATUS_LOADEDSTATUS_LOADING内使用的内部常量),则不会触发InfiniteLoader。如果设置为_loadMoreRows(),则会触发undefined

通过此设置,trigering _loadMoreRows()可以向上和向下滚动两个方向。