当我滚动到屏幕的一半时，我希望我的反应组件加载更多数据

Question

我正在创建一个 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 属性，但没有成功。

Answer 1

我想您可能想使用 scrollThreshold 属性来定义何时调用 next。

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

如果您要删除加载程序，只需省略该道具即可。

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

当我滚动到屏幕的一半时，我希望我的反应组件加载更多数据

i want my react component to load more data when i scroll to half of my screen

javascript

reactjs

react-infinite-scroll-component