在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