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

一、html结构

this.setState({ textValue: e.target.value,nums: 1,showData: JSON.parse(JSON.stringify([]))})} /> //有查询条件时,条件初始化
//查询条件
this.contentNode = node} onScrollCapture={() => this.onScrollHandle()}> {this.getTabTextList()} //列表循环li内容,外层div类似ul

二、js代码逻辑

getTabTextList = () => {
        const { showData } = this.state   //列表数据进行循环渲染页面
        if ((showData == undefined) || showData.length <= 0) {
            return (
                
无数据
) } return showData.map((item, index) => { return (
{index + 1}、名称:
{item.name}
建议:
{item.shouldDo ? item.shouldDo : '无'}
) }) }
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('可以了,我已经到底了!!!');
        }
    }




{this.state.tabType == '1' ? 
record.id + Math.random()} scroll={{ y: 320 }} /> :
} //componentWillUnmount() { //if (this.contentNode) { //this.contentNode.removeEventListener('scroll', //this.onScrollHandle.bind(this)); // } // }

你可能感兴趣的:(前端小强踩坑之路,webview,javascript,react)