css 使用React Virtualized时在元素之间添加间隙

w51jfk4q 于 2022-11-26 发布在 React

关注(0)|答案(2)|浏览(160)

我正在使用React-Virtualized创建一个延迟加载的无限列表。
https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md
但是，我无法在渲染的div之间创建间隙，因为它们是绝对定位的，并且top是动态计算的。
我已经尝试了以下方法，但是没有成功。有什么办法可以在每个元素之间增加这个间隙吗？谢谢！

<AutoSizer disableHeight>
   {({width}) => (
              <List
                onRowsRendered={onRowsRendered}
                ref={registerChild}
                rowCount={rowCount}
                rowRenderer={rowRenderer}
                width={width - 30}
                rowHeight={175}
                height={this.state.height - 64}
                style={{
                  paddingTop: 15,
                  boxSizing: 'content-box',
                }}
                containerStyle={{
                  position: 'relative',
                  overflow: 'visible',
                }}
              />
    )}
</AutoSizer>

css

来源：https://stackoverflow.com/questions/53928254/add-gap-between-elements-while-using-react-virtualized

2条答案

按热度按时间

vmpqdwk31#

最后，我通过在CellMeasurer中添加一个div作为提供填充的父容器来解决填充问题。
div是绝对定位的容器，而Card是填充的并显示框阴影。

<CellMeasurer
      cache={this.cache}
      columnIndex={0}
      key={key}
      rowIndex={index}
      parent={parent}
    >
      {({ measure }) => (
        <div
          className={s.listItem}
          style={style}
          onLoad={measure}
          key={index}>
            <Card>

赞(0）回复(0）举报 2022-11-26

erhoui1w2#

使用padding-bottom围绕渲染项目构建div。
示例：

<div style={paddingBottom:10}>
  // Your item component goes here
</div>

我也在GitHub上问过你，你更喜欢哪种方式。https://github.com/bvaughn/react-virtualized/issues/1786

赞(0）回复(0）举报 2022-11-26

我来回答

css 使用React Virtualized时在元素之间添加间隙

2条答案

相关问题

热门标签

最新问答