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

最新推荐文章于 2024-12-26 10:16:43 发布

转载最新推荐文章于 2024-12-26 10:16:43 发布 · 851 阅读

7 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qingfengweb/p/10130043.html

文章标签：

#javascript #ViewUI

本文分享了一款用于React移动端项目的上拉加载更多数据的分页组件实现。通过监听滚动事件，判断是否触底并触发加载更多功能，适用于需要无限滚动加载场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发移动端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;

转载于:https://www.cnblogs.com/qingfengweb/p/10130043.html