react-infinite-scroller组件滚动分页加载

最新推荐文章于 2024-08-09 07:27:43 发布

小胖梅前端

最新推荐文章于 2024-08-09 07:27:43 发布

阅读量3.2k

点赞数

分类专栏： react 文章标签： react.js

本文链接：https://blog.csdn.net/xm1037782843/article/details/120443947

版权

本文介绍了如何在React项目中使用react-infinite-scroller组件进行滚动分页加载。通过安装react-infinite-scroller和react-custom-scrollbars库，然后设置关键代码，包括监听滚动加载更多的事件handleInfiniteOnLoad，实现数据的动态加载。

摘要由CSDN通过智能技术生成

安装：

需要安装：cnpm i react-infinite-scroller react-custom-scrollbars -S

关键代码：

//滚动加载

import InfiniteScroll from 'react-infinite-scroller';

import {Scrollbars} from 'react-custom-scrollbars';

使用：

 <Scrollbars  style={
  {height: "calc(100vh - 80px)"}} autoHide>

       <InfiniteScroll
    
             initialLoad={false}

             pageStart={0}

             loadMore={this.handleInfiniteOnLoad}

             hasMore={!this.state.loading && this.state.hasMore}

            useWindow={false}

        >

          循环的数据渲染

 </InfiniteScroll>

 </Scrollbars>

再次请求的事件

//滚动加载更多

handleInfiniteOnLoad = () => {}

部分代码展示