在開發移動端react專案中，遇到了上拉載入更多資料的分頁功能，自己封裝了一個元件，供大家參考，寫的不好還請多多指教！
　　

import React, {Component} from 'react';
import cssModuleHandler from "../../../utils/cssModuleHandler";
import styleObject from './LoadMore.scss';

const GSV = cssModuleHandler(styleObject);

class LoadMore extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const loadMoreFn = this.props.loadMoreFn;

        const callback = () => {
            if (this.getScrollTop() + this.getWindowHeight() + 100 > this.getScrollHeight()) {
                loadMoreFn();
            }
        }

        //滾動事件
        let timeAction;
        window.addEventListener('scroll', () => {
            if (this.props.isLoadingMore) {
                return;
            }

            if (timeAction) {
                clearTimeout(timeAction);
            }

            timeAction = setTimeout(callback, 50);
        });
    }

    //滾動條在Y軸上的滾動距離
    getScrollTop() {
        let scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }

    //文件的總高度
    getScrollHeight() {
        let scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;
    }

    //瀏覽器視口的高度
    getWindowHeight() {
        let windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }

    render() {
        return (
            <React.Fragment>
                {this.props.isLoadingMore
                    ? <div className={GSV('loadMore')} ref='wrapper'><img
                        src={require('../../../static/img/common/ic/spinner.png')} alt=""/></div>
                    : ''}
            </React.Fragment>
        )
    }
}

export default LoadMore;

　在需要分頁的元件中引入LoadMore元件：

import React, {Component} from 'reactimport {observer, inject} from "mobx-react";import {InputItem} from 'antd-mobile';

import LoadMore from "../../../../../components/Commoncomponent/LoadMore/LoadMore";
import PrizeList from "./view/PrizeList/PrizeList";
import cssModuleHandler from "../../../utils/cssModuleHandler";
import styleObject from './index.scss';

const GSV = cssModuleHandler(styleObject);

@inject("commonAction", "commonStore", "giftCouponStore", "giftCouponAction")
@observer
class GiftCoupon extends Component {
    constructor(props) {
        super(props);
      
        this.pageNo = 0;
        this.itemPerPage = 200;
    }

    componentDidMount() {
        //初始化資料
        this.loadMoreFn();
    }

    //載入更多
    loadMoreFn = () => {
        this.pageNo++;

        this.props.giftCouponAction.queryBonusListPage({
            pageNo: this.pageNo,
            itemPerPage: this.itemPerPage
        });
    }

    render() {
        const {giftCouponList, isLoadingMore} = this.props.giftCouponStore;

        return (
            <div className={GSV('otherGiftCouponWrapper')}>
                {
                    giftCouponList.length > 0 &&
                         {/*禮券列表*/}
                         <PrizeList giftCouponAction={this.props.giftCouponAction}
                                    data={giftCouponList}
                                    loadMoreFn={this.loadMoreFn}
                                    isLoadingMore={isLoadingMore}
                         />
 
                }
　　　　　　　　　　{/*載入更多*/}
　　　　　　　　　　<LoadMore loadMoreFn={loadMoreFn}  isLoadingMore={isLoadingMore}/>

            </div>
        )
    }
}

export default GiftCoupon;