0

我正在创建一个 React 项目,我通过调用 api 来渲染数据,并且每次 api 都会给我长度为 10 的数据数组。我正在使用react-infinite-scroll-component来使用无限滚动功能。每当我在屏幕的一半滚动时,我都想加载数据,我不想在屏幕上显示加载器。任何人都可以帮助我。



 <InfiniteScroll
            dataLength={data.length}
            next={fetchMoreData}
            hasMore={true}
            loader={
              <CircularProgress/>
            }
          >
            {data.map((item, index) => {
              return <Card data={item} key={index} />;
            })}
          </InfiniteScroll>

这是我的无限滚动代码,我尝试更改 dataLength 道具,但没有奏效。

4

1 回答 1

1

我认为您可能希望使用scrollThreshold定义何时调用 next 的属性。

您可以传递浮点数(例如 0.5)或字符串(例如“200px”)来定义它。

如果您要删除加载程序,请忽略该道具。

来自这里的道具列表:https ://www.npmjs.com/package/react-infinite-scroll-component

于 2022-01-04T11:46:23.177 回答