react-virtualized InfiniteLoader 在两个方向，顶部和底部答案

【问题标题】：react-virtualized InfiniteLoader in both directions, top and bottomreact-virtualized InfiniteLoader 在两个方向，顶部和底部
【发布时间】：2018-02-05 15:28:14
【问题描述】：

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

【问题讨论】：

标签： infinite-scroll react-virtualized

【解决方案1】：

我现在可以工作了 :) 一切都很好。 <InfiniteLoader> 的 threshold 属性定义了预取数据时在 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,
    });

在显示列表之前，<List> 组件的 scrollToIndex 属性应该设置在列表的中间，即rowCount/2。这个数应该满足方程

    0 + threshold < scrollToIndex < rowCount - 1 - threshold.

函数_isRowLoaded() 将检查loadedRowsMap[index]。如果设置为STATUS_LOADED 或STATUS_LOADING（InfiniteLoader 内部使用的内部常量），则不会触发_loadMoreRows()。如果设置为undefined，则触发_loadMoreRows()。

使用此设置，触发_loadMoreRows() 可在上下两个滚动方向上工作。

【讨论】：

我做了同样的事情，但在顶部添加元素后，列表无法保持在当前滚动位置。你能分享一段你是怎么做的代码吗？
您好！想知道是否有办法让工作代码演示用作示例？这正是我需要的，但不确定如何按原样吸收这些信息。