infinite-scroll - 双向 react 虚拟化 InfiniteLoader，顶部和底部

Question

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

Answer 1

我现在工作了:) 一切都很好。 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()适用于上下两个滚动方向。