如何在上下两个方向无限滚动。我正在使用 InfiniteLoader 和 List,它们都是 react-virtualized 组件。我有一个带有初始日期时间范围的时间戳列表。从那里开始,列表在两个方向上都应该是无限的。目前,向下滚动到列表底部将触发函数 _loadMoreRows()。但是,我想在向上滚动时触发具有相同功能的 _loadMoreRows()。
最佳答案
我现在工作了:) 一切都很好。 threshold
<InfiniteLoader>
的 Prop 定义 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>
的 Prop 组件应设置在列表的中间,即 rowCount/2
.这个数字应该满足等式 0 + threshold < scrollToIndex < rowCount - 1 - threshold.
功能
_isRowLoaded()
会查loadedRowsMap[index]
.如果设置为 STATUS_LOADED
或 STATUS_LOADING
(在 InfiniteLoader
内部使用的内部常量)它不会触发 _loadMoreRows()
.如果设置为 undefined
, 那么它会触发 _loadMoreRows()
.使用此设置,触发
_loadMoreRows()
适用于上下两个滚动方向。
关于infinite-scroll - 双向 react 虚拟化 InfiniteLoader,顶部和底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45917664/