react实现滚动分页、前端分页、后端分页

一、html结构

<div className="topSearch">
                    <Input placeholder="患者姓名、病历号" value={textValue} allowClear style={{ width: 312 }} onChange={e => this.setState({ textValue: e.target.value,nums: 1,showData: JSON.parse(JSON.stringify([]))})} />  //有查询条件时，条件初始化
                    <Button type="primary" onClick={this.searchText} style={{ width: 60, marginLeft: 8, background: '#45b6f6', borderRadius: 6, fontSize: 12 }}>搜索</Button>
                </div>   //查询条件

<div className="ritTabStylInner" ref={node => this.contentNode = node}
  onScrollCapture={() => this.onScrollHandle()}>
    {this.getTabTextList()}  //列表循环li内容，外层div类似ul
</div>

二、js代码逻辑

getTabTextList = () => {
        const { showData } = this.state   //列表数据进行循环渲染页面
        if ((showData == undefined) || showData.length <= 0) {
            return (
                <div className="tabDataNo">
                    <div className="dataPic">
                        <img src={noDatas} alt=""></img>
                    </div>
                    <div className="dataText">无数据</div>
                </div>
            )
        }
        return showData.map((item, index) => {
            return (
                <div className="tabInnerLi" key={index}>
                    <div className="textLi1">
                        <div className="leftliName1"><span>{index + 1}、</span>名称：</div>
                        <div className="nameRit1">{item.name}</div>
                    </div>
                    <div className="textLi1">
                        <div className="leftliName">建议：</div>
                        <div className="nameRit1">{item.shouldDo ? item.shouldDo : '无'}</div>
                    </div>
                </div>
            )
        })
    }

onScrollHandle = () => {   //滚动事件
        const clientHeight = this.contentNode.clientHeight;
        const scrollHeight = this.contentNode.scrollHeight;
        const scrollTop = this.contentNode.scrollTop;
        const isBottom = scrollHeight - scrollTop - clientHeight;
        if (isBottom <= 0) {
            this.setState({
                loading: true,
            })
            var _this = this
            setTimeout(function () {
                _this.explandShowData()
            }, 200)
        }
    }  


explandShowData = async () => {
        const { nums,totalCount} = this.state;
        const totalMax = Math.ceil(totalCount/10)
        var index = nums + 1;
        if(totalMax>nums){
            await this.setState({
                nums: index,
            })
            await this.getZjPageList()   //列表数据
        }else{
            await this.setState({
                loading: false,
            })
        }
    } 

getZjPageList = async () => {   //列表数据
        const { showData } = this.state
        this.state.loading = true
        const data = {
            hospitalCode: this.state.hospitalCode,
            inhospNo: this.state.inhospNo,
            patientId: this.state.patientId,
            pageNo:this.state.nums,
            physicianCode:this.state.textValue
        }
        await zjPageList(data).then(
            (res) => {
                if (res.code === '200') {
                    const data = res.body
                    const totalCount = res.body.totalCount  //后端返回数据总数
                    if(totalCount<=10){   //数据小于10条直接显示
                        this.setState({
                            loading: false,
                            caseList:data.items,
                            totalCount:totalCount
                        })
                    }else{  //大于10条往数据后依次添加
                        var newData = data.items
                        showData.push(...newData)
                        this.setState({
                            loading: false,
                            caseList:showData,
                            totalCount:totalCount
                        })
                    }
                } else {
                    message.error(res.message);
                }
            },
            (error) => {
                message.error('请求失败');
            }
        );
    } 

//需要注意点！！！坑
searchText = async() => {  //举例：假如有筛选条件，需要将this.contentNode.scrollTop置0重点
        this.contentNode.scrollTop = 0
        await this.getZjPageList()
        await this.onScrollHandle()
    }

//添加一个ui组件antd获取滚动事件，与自定义滚动略有不同，下列代码与上部分无关

onScrollHandle = () => {
        // const {scrollDistance} =this.state
        var tableScrol = document.getElementsByClassName('ant-table-body')[0]
        tableScrol.addEventListener("scroll", (v) => {
            var scrollDistance = tableScrol.scrollHeight - tableScrol.scrollTop -             
            tableScrol.clientHeight;
            if (scrollDistance <= 0) {
                this.setState({
                    loading: true,
                })
                var _this = this
                setTimeout(function () {
                    _this.explandShowData()
                }, 200)
            }
        });
    }


explandShowData = async () => {
        // const { resultList, itemIndex } = this.state;
        // var leng = resultList.length;
        // var index = itemIndex + 10;
        // if (index > leng) {
        //     index = leng;
        // }    注释项为前端分页时主要逻辑
        // var addData = resultList.slice(0, index)
        // var show = [].concat(...addData)
        // await this.setState({
        //     showData: show,
        //     itemIndex: index,
        // })

        const { nums, totalCount } = this.state;
        const totalMax = Math.ceil(totalCount / 10)
        var index = nums + 1;
        if (totalMax > nums) {
            await this.setState({
                nums: index,
            })      //该段主要为后端分页主要逻辑
            await this.getZjPageList()
        } else {
            await this.setState({
                loading: false,
            })
            // message.error('可以了，我已经到底了！！！');
        }
    }



<Spin spinning={this.state.loading} tip="Loading...">
{this.state.tabType == '1' ? <div className="tableAllScrol">
<Table columns={caseListHeadSort} dataSource={[...resultList]} size="small" pagination={false} rowKey={record => record.id + Math.random()} scroll={{ y: 320 }} />
 </div> : <div></div>}
 </Spin>


//componentWillUnmount() {
        //if (this.contentNode) {
            //this.contentNode.removeEventListener('scroll', //this.onScrollHandle.bind(this));
       // }
  //  }