Question

我在（https://github.com/seatgeek/react-infinite）中使用react-infinite，在用户滚动时加载数据。

对我来说问题是子元素（在容器内），它们的高度是动态的。

这是html的结构：

<Infinite class="container" containerHeight={ContainerHeight} elementHeight={rowHieght}>
    <div class="child"> </div>
    <div class="child"> </div>
    ..
</Infinite>

所以当我传递无限的rowHeight和containerHeight时，我会动态地计算它们。

问题是孩子可以有不同的高度（意味着1个孩子的身高可以达到100，白色的孩子可以有300个）。

这使得无限滚动有时会卡住。

这是无限滚动的可能方案。

Answer 1

按document，您可以这样设置：

<Infinite containerHeight={200} elementHeight={[111, 252, 143]}>
    <div className="111-px"/>
    <div className="252-px"/>
    <div className="143-px"/>
</Infinite>

React - 无限滚动 - 具有动态高度的儿童元素

1 个答案: