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;

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;