react下拉加载下一页

最新推荐文章于 2023-12-16 22:02:39 发布

破晓小v

最新推荐文章于 2023-12-16 22:02:39 发布

阅读量209

点赞数

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

本文链接：https://blog.csdn.net/weixin_41983443/article/details/129224188

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

react下拉加载下一页

.box{
	height: 500px;
    width: 660px;
    overflow: auto;
}
<div
       onScroll={onScroll}
        ref={scrollRef}
      class='box'     
</div>       

const onScroll = e => {
        const {scrollTop, scrollHeight, clientHeight} = e.target;
        let curPn = recordParams.pn;
        let curRn = recordParams.rn;
        if ((scrollHeight - scrollTop) === clientHeight && (curPn * curRn < curRecordTotal)) {
            // 滚动到底部&下一页还有数据
            // 加载下一页
            let npn = ++curPn;
            let param = {
                ...recordParams,
                pn: npn,
            };
            // 请求下一页数据
            getDataList(param);
        }
    };