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在兩個方向上，頂部和底部

回答

相關問題