react上拉加载更多的方法

app.jsx  在didmounted请求初始的数据，就是第一页的数据

requestData({
            service: 'miles_service',
            funid: 29,
            postData: {
                periods: utils.getUrlParam('periods')
            },
            callback: (data) => {
                let rankPage, wakePage;
                if (data.ranking_list.length < data.page_size) {    //判断是否只有一页...
                    rankPage = false;
                    storeStatics.List.isLoadRank = true;
                } else {
                    rankPage = true;
                }
                if (data.stay_list.length < data.page_size) {   //判断是否只有一页
                    wakePage = false;
                    storeStatics.List.isLoadWake = true;
                } else {
                    wakePage = true;
                }
                this.setState({
                    data:data,
                    ranking_list:data.ranking_list,
                    stay_list: data.stay_list,
                    rankPage: rankPage,
                    wakePage: wakePage
                });
                console.log("data",data);
            },
            ignoreError:true,
            failCallback: (data) => {
                storeActions.toast.dispatch(data.result.msg);
            },
            onError: (e) => {
                storeActions.toast.dispatch('出错啦，请重试',e);
            }
        });
    }

app.jsx  加载更多时请求的方法 在其子组件（滚动内容区域）会调用该方法，因此要把该方法作为参数传给子组件

 loadMore(list_type, page_num) {   //分页请求
        requestData({
            service: 'miles_service',
            funid: 33,
            postData: {
                query_type: 2,
                apprentice_type: list_type,
                page_num: page_num,
                periods: utils.getUrlParam('periods')
            },
            callback: (data) => {
                //console.log(data);
                if (data.resp_status === 1) {
                    // let datashow = data.data_show.reverse(); //reverse()
                    if (list_type === 1) {
                        if (data.ranking_list.length > 0) {
                            this.setState({
                                ranking_list: this.state.ranking_list.concat(data.ranking_list),
                                isHasMoreRank: true
                            })
                            storeStatics.List.isLoadRank = false;  //在子组件内部绑定了自己的实例，数据请求完毕后，如果不是最后一页，该值归置为false

                        } else {
                            this.setState({

                                isHasMoreRank: false
                            })
                            storeStatics.List.isLoadRank = true;  //最后一页，该值归置为true 
                        }
                    } else {
                        if (data.stay_list.length > 0) {
                            this.setState({
                                stay_list: this.state.stay_list.concat(data.stay_list),
                                isHasMoreWake: true
                            })
                            storeStatics.List.isLoadWake = false;     //数据请求完毕
                        } else {
                            this.setState({
                                isHasMoreWake: false
                            })
                            storeStatics.List.isLoadWake = true;
                        }
                    }
                } else {
                    storeActions.toast.dispatch(data.resp_msg);
                }
            },
            ignoreError: true,
            failCallback: (data) => {
                //console.log(data);
                storeActions.toast.dispatch(data.result.msg);
            },
            onError: (e) => {
                storeActions.toast.dispatch(e);
            }
        });

    }

container.jsx 就是滚动区域的组件

 constructor(props) {
        super(props);
        this.state={
            islist : true,
            islogin : false
        }
        storeStatics.List = this;     //把当前实例保存在storeStatics，其他实例可以直接通过storeStatics.List调用


        this.stay_page_num = 1;        //初始页数
        this.rank_page_num = 1,
        this.isLoadRank = false;      //下拉刷新时，判断能否达到请求数据的条件
        this.isLoadWake = false;
    }
    componentDidMount() {
        const that = this;
        console.log(this.refs);
        const tribute = this.refs.tribute;
        tribute.addEventListener('scroll', function () {
            //alert(tribute.scrollTop + ',' + tribute.scrollHeight + ',' + tribute.innerHeight)      
            if (tribute.scrollTop >= tribute.scrollHeight - tribute.offsetHeight) {      //到达临界值
                //alert('qq');
                //alert(that.isLoadRank);
                if (that.state.islist) {
                    if (!that.isLoadRank) {   
                        that.isLoadRank = true;    //请求时把该值改为true 如果数据还没回来则再次到达临界值不会请求服务器
                        that.rank_page_num = that.rank_page_num + 1;
                        that.props.load(1, that.rank_page_num)        //调用父组件传的方法，请求数据
                    }
                } else {
                    if (!that.isLoadWake) {
                        that.isLoadWake = true;
                        that.stay_page_num = that.stay_page_num + 1;
                        that.props.load(2, that.stay_page_num)
                    }
                }

            }

        })
    }