2

我在 Masonry 上使用 react-virtualized 的例子（这里）

它有效。但是现在我正在尝试将 InfiniteLoader 添加到示例中，但无法使其正常工作。

我尝试过的事情：

  • 不使用 WindowScroller 并定义我自己的高度

最初我认为它可以通过删除 WindowScroller 来工作，但从未调用loadMoreRows回调。

也永远不会调用isRowLoaded回调。

一段代码演示了它是如何实现的：

<InfiniteLoader
  isRowLoaded={this._isRowLoaded}
  loadMoreRows={this._loadMoreRows}
  rowCount={myList.length}
>
  {({ onRowsRendered, isScrolling, registerChild }) => (
    <WindowScroller overscanByPixels={OVERSCAN}>
      {this._renderAutoSizer}
    </WindowScroller>
  )}
</InfiniteLoader>

从_renderAutoSizer就像示例一样。没有变化。Masonry 按预期工作，但无法实现无限滚动。

我知道我需要以某种方式使用 onRowsRendered 。但是这些示例显示了列表和网格的用法。Masonry 似乎无法与 InfiniteLoader 连接。

4

2 回答 2

1

你可以使用onCellsRendered砌体方法

使用有关最近呈现的单元格的信息调用的回调。此回调仅在可见单元格发生更改时调用： ({ startIndex: number, stopIndex: number }): void more here

并检查是否stopIndex === (myList.length - 1)有更多项目，然后调用一个方法来加载更多项目。

于 2019-02-04T10:48:01.293 回答
0

根据这个答案InfiniteLoader 仅适用于Table,List和Grid。InfiniteLoader 文档：

请注意，此组件旨在协助行加载。因此，它最适合与Tableand一起使用List（尽管它也可以与 一起使用Grid）。该组件与该组件不兼容Collection。

于 2018-05-01T14:53:54.947 回答