6

我有一个使用react-window、infinite loader和auto sizer的固定列表和网格。它工作正常，但我希望在列表/网格开始之前附加一个组件（例如，一个搜索框和一个按钮）。实现此目的的正确方法是什么？我希望这个组件与固定列表一起滚动，而不是单独滚动。我之前已经厌倦了渲染组件，但是它不在固定列表容器中并且不会随它滚动。

{/* WANT TO ADD SOME SORT OF COMPONENT HERE SO IT CAN SCROLL WITH LIST */}
{/* CAN'T IN HERE BECAUSE ITS NOT INSIDE THE FIXED CONTAINER SO IT SCROllS SEPARATELY */}
<AutoSizer>
    {({ height, width }) => (
        <InfiniteLoader
            isItemLoaded={index => index < stateData.data.length}
            itemCount={stateData.data.length + 1}
            loadMoreItems={loadMoreProducts}
        >
            {({ onItemsRendered, ref }) => (
                <FixedSizeList
                    onItemsRendered={onItemsRendered}
                    ref={ref}
                    height={height}
                    itemCount={stateData.data.length + 1}
                    itemSize={350}
                    width={width}
                >
                    {/* WANT TO ADD SOME SORT OF COMPONENT HERE SO IT CAN SCROLL WITH LIST */}
                    {/* CAN'T IN HERE BECAUSE ITS LOOPING LISTITEM */}
                    {ListItem}
                </FixedSizeList>
            )}
        </InfiniteLoader>
    )}
</AutoSizer>

编辑：我几乎不希望列表（或网格）和实际页面是两个不同的滚动容器。我希望整个页面一起滚动。我遇到了这个问题，因为我的一些容器需要有一个无限的项目列表，用户可以滚动浏览，因此需要对列表进行虚拟化以提高性能。

在此处查看演示。确实，固定容器应该被视为整个页面和搜索框，其他所有内容都应该随着无限列表滚动。拥有两个不同的滚动容器对于 ux 来说并不是太好。

4

2 回答 2

0

如果您希望整个页面与您的虚拟列表一起滚动，您将需要一个窗口滚动器。这还涉及到一些样式。要使您的搜索框与您的列表一起滚动，您需要一个固定的位置。间隔 div 和一些样式有助于产生这种错觉。

我在此处为您的 codepen 添加了一个基本的窗口滚动器和一些样式更改。

于 2019-08-19T19:54:43.047 回答
0

几个选项：

  • 围绕自动调整器制作一个包装器，它包含您的搜索框和自动调整器。
<>
  <SearchBox />
  <AutoSizer>
    ... your items
  </AutoSizer>
</>
  • 让 AutoSizer 同时包含搜索和列表
<AutoSizer>
  <SearchBox />
  <List>
    ... your items
  </List>
</AutoSizer>
  • 由于您的无限滚动使用的是渲染功能，您可能需要片段
<AutoSizer>
  <InfiniteScroll>
    {({ onItemsRendered, ref }) => (
      <>
        <SearchBox />
        <List>
          ... your items
        </List>
      <>
    )}
  </InfiniteScroll>
</AutoSizer>

在这里，我编辑了您的示例并使用这种方法使其工作。

请注意，页面滚动只是因为顶部和底部栏；这是您示例中的行为。

  • 让无限加载器填充一个数组，并在其中附加一个额外的项目。该项目可以具有某种类型。假设 FixedSizeList 是 List 组件，react-virtualized那么您可以使用它的 rowRenderer 以不同于其他项目的方式呈现“搜索”类型的项目。就像是：
function rowRenderer ({ key, type, value, ...rest }) {
  if (type === 'search') {
    return <Search key={key} placeholder={value} {...rest} />
  } 

  return <div key={key} {...rest}>{value}</div>
}

// Render your list
ReactDOM.render(
  <AutoSizer>
    {({ height, width }) => (
      <List
        height={height}
        rowCount={list.length}
        rowHeight={20}
        rowRenderer={rowRenderer}
        width={width}
      />
    )}
  </AutoSizer>,
  document.getElementById('example')
);

也许看看Vaughn的简单例子也有帮助。

于 2019-08-25T10:11:07.403 回答