无限滚动 – 反应虚拟化的InfiniteLoader在两个方向,顶部和底部

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

在显示列表之前,< List>的scrollToIndex prop.组件应设置为列表的中间,即rowCount / 2.这个数字应该满足等式

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

函数_isRowLoaded()将检查loadedRowsMap [index].如果它设置为STATUS_LOADED或STATUS_LOADING(在InfiniteLoader中使用的内部常量),它将不会触发_loadMoreRows().如果将其设置为undefined,则会触发_loadMoreRows().

使用此设置,trigering _loadMoreRows()可在两个滚动方向上下运行.