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

Question

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

Answer 1

我现在正在工作:)一切都很好。的thresholdprop <InfiniteLoader>定义List何时预取数据（即trigger）开始/结束之前的索引阈值数_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，它将触发_loadMoreRows()。

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