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

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

来源

2017-08-28 sara.aleksi

我现在工作:)一切都很好。 <InfiniteLoader>的threshold道具定义在预取数据时的开始/结束之前的索引的阈值数量，即，触发器_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()在两个滚动方向上，向上和向下都起作用。

来源

2017-08-28 12:29:15

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

回答

相关问题