react移动端上拉加载更多组件
发布时间:2020-12-15 20:38:23 所属栏目:百科 来源:网络整理
导读:在开发移动端react项目中,遇到了上拉加载更多数据的分页功能,自己封装了一个组件,供大家参考,写的不好还请多多指教! import React,{Component} from ‘react‘;import cssModuleHandler from "../../../utils/cssModuleHandler";import styleObject fro
在开发移动端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‘)} /></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; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |