react移动端上拉加载更多组件

在开发移动端react项目中，遇到了上拉加载更多数据的分页功能，自己封装了一个组件，供大家参考，写的不好还请多多指教！
　　

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85

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组件：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

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;