手机端效果实现下拉刷新上拉加载更多数据---自定义数据篇

Posted 2021-09-08 老张在线敲代码

代码如下

需安装react-pullload插件
yarn add react-pullload

import React from 'react'
import "../../../node_modules/react-pullload/dist/ReactPullLoad.css";
import ReactPullLoad,{STATS} from 'react-pullload'
const loadMany= 3;//设置可以加载多少次

const cData = [
	"https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0820%2F5b995c63j00qy48rp001ic000jg00elm.jpg&thumbnail=650x2147483647&quality=80&type=jpg",
  "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0820%2F5b995c63j00qy48rp001ic000jg00elm.jpg&thumbnail=650x2147483647&quality=80&type=jpg",
  "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0820%2F5b995c63j00qy48rp001ic000jg00elm.jpg&thumbnail=650x2147483647&quality=80&type=jpg"
]

class App extends React.Component{

	constructor(){
		super();
		this.state ={
			hasMore: true,
			data: cData,
			action: STATS.init,
			index: loadMany 
    }
	}

	handleAction = (action) => {
		console.info(action, this.state.action,action === this.state.action);
		if(action === this.state.action ||action === STATS.refreshing && this.state.action === STATS.loading ||action === STATS.loading && this.state.action === STATS.refreshing){
			return false
		}

		if(action === STATS.refreshing){//刷新
			setTimeout(()=>{
				this.setState({
					data: cData,
					hasMore: true,
					action: STATS.refreshed,
					index: loadMany
				});
			}, 3000)
		} else if(action === STATS.loading){//加载更多
			this.setState({
				hasMore: true
			});
			setTimeout(()=>{
				if(this.state.index === 0){
					this.setState({
						action: STATS.reset,
						hasMore: false
					});
				} else{
					this.setState({
						data: [...this.state.data, ...cData],
						action: STATS.reset,
						index: this.state.index - 1
					});
				}
			}, 2000)
		}
		this.setState({
			action: action
		})
	}
	getScrollTop = ()=>{
		if(this.refs.reactpullload){
			console.info(this.refs.reactpullload.getScrollTop());
		}
	}
	setScrollTop = ()=>{
		if(this.refs.reactpullload){
			console.info(this.refs.reactpullload.setScrollTop(100));
		}
	}
	componentDidMount(){}
	render(){
		const {
			data,
			hasMore
		} = this.state

		return (
			<div style={{background:'white',margin:0,padding:0}}>
				<ReactPullLoad
					downEnough={150}
					ref="reactpullload"
					className="block"
					isBlockContainer={true}
					action={this.state.action}
					handleAction={this.handleAction}
					hasMore={hasMore}
					style={{paddingTop: 0}}
					distanceBottom={1000}>
					<ul className="test-ul">
						{
							data.map( (item, index )=>{
								return <li key={index}><img src={item} alt=""/></li>
							})
						}
					</ul>
				</ReactPullLoad>
			</div>
		)
	}
}
export default App