如何在两个方向上,向上和向下进行无限滚动。我使用的是InfiniteLoader和List,它们都是反应虚拟化的组件。我有一个带有初始日期时间范围的时间戳列表。从那里列表应该在两个方向上是无限的。目前,向下滚动到List的底部将触发函数_loadMoreRows()。但是,我想在向上滚动时触发具有相同功能的_loadMoreRows()。
答案 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_LOADED
(STATUS_LOADING
内使用的内部常量),则不会触发InfiniteLoader
。如果设置为_loadMoreRows()
,则会触发undefined
。
通过此设置,trigering _loadMoreRows()
可以向上和向下滚动两个方向。