在react中引入下拉刷新和上拉加载

1. 首先引入插件 import ReactPullLoad, {STATS} from 'react-pullload'

2. 初始化：

       constructor(props) {
           super(props);
        this.state = {
            action: STATS.init,
            hasMore: true,
            isMore:1,
            page:1
            
        }

3. // 用来触发加载和刷新的函数

handleAction = (action) => {
    console.info(action, this.state.action, action === this.state.action);
    //new action must do not equel to old action
    if(action === this.state.action) {
        return false
    }

    if(action === STATS.refreshing) { //刷新
        this.handRefreshing();

    } else if(action === STATS.loading) { //加载更多
        this.handLoadMore();
    } else {
        //DO NOT modify below code
        this.setState({
            action: action
        })
    }
}
//刷新
handRefreshing = () => {
    if(STATS.refreshing === this.state.action) {
        return false
    }
    setTimeout(() => {
        //refreshing complete
        this.setState({
            hasMore: true,
            action: STATS.refreshed
        });
    }, 2000)
    this.setState({
        action: STATS.refreshing
    })
}
//加载更多
handLoadMore = () => {
    if(STATS.loading === this.state.action) {
        return false
    }
    setTimeout(() => {
        if(this.state.isMore === 0) {
            this.setState({
                action: STATS.reset,
                hasMore: false
            });
        } else {
            var n=this.state.page;
                n++;
                $.ajax({
                    type: "POST",
                    url:httphead+"/author/goods/getList",
                    data:{
                        page:n,
                        end:10,
                        cateIds:catAllId,
                        keyword:this.state.value
                    },
                    headers:{
                        Authorization:headers_vendor
                    },
                    success:function(data){
                        
                        if(data.code == 100){
                            var nData = this.state.goodList.concat(data.data.goodsList);
                            this.setState({
                                goodList:nData,
                                action: STATS.reset,
                                isMore:data.data.isMore,
                                page:n
                            })
                        }else if(data.code == 500){
                            window.location.href = "/";
                        }else{
                            alert(data.message);
                        }
                    }.bind(this)
                })
        }
    }, 500)

    this.setState({
        action: STATS.loading
    })
}

转载于:https://www.cnblogs.com/panax/p/8510863.html