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

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

import React, { Component } from 'react';
import ReactPullLoad, { STATS } from 'react-pullload';
import "../../../node_modules/react-pullload/dist/ReactPullLoad.css"
import Unit from '../../unit/index';
class Home extends Component {
    constructor(props){ 
        super(props)
        this.state={
            hasMore: true,
                  data: [],
                  action: STATS.init,
                  index: 3,
                  page: 1,
                  pagesize:3
        }
    }
    componentDidMount(){
      this.init()
	}
  handleAction = action => {
    console.info(action, this.state.action, action === this.state.action);
    if (action === this.state.action) {
      return false;
    }
 
    if (action === STATS.refreshing) {
      this.handRefreshing();
    } else if (action === STATS.loading) {
      this.handLoadMore();
    } else {
      this.setState({
        action: action
      });
    }
  };

  handRefreshing = () => {
    if (STATS.refreshing === this.state.action) {
      return false;
    }
    setTimeout(() => {
      this.init()
    },2000)
    this.setState({
      action: STATS.refreshing
    });
  };

  handLoadMore = () => {
    if (STATS.loading === this.state.action) {
      return false;
    }
    if (this.state.hasMore ===true) {
      return;
    } else {
      setTimeout(() => {
        const { page,pagesize } = this.state;
        Unit.getApi2('/home/mediareports', {
          page_number: page,
          page_size:pagesize
        }, {}).then((res) => {
          console.log(res.data.data, '789')
          const { data } = this.state;
          const data1=[...data,...res.data.data]
          this.setState({
            data: data1,
            action: STATS.reset,
            page:page+1
          })
        })
      },1000)
    }
    this.setState({
      action: STATS.loading
    });
  };
  init() {
    const { page } = this.state;
    Unit.getApi2('/home/mediareports', {
      page_number: page,
      page_size: 3
    }, {}).then(res => {
      this.setState({
        data: res.data.data,
        action: STATS.refreshed,
        page: page + 1,
        hasMore:false
      })
      console.log('1111',res.data.data)
  })
  }
    lists() {
        const {data}=this.state
        return data.map((val, index) => {
          return (
            <li key={index}>
              <div className="content_detail1">
                <img src={require("../../images/img/标签@2x.png").default} alt="" />
                <div className="detail_header"></div>
                <div className="detail_h_r">
                  <div className="detail_h_t">
                    <p>{val.id}</p>
                    <div>
                      <p>{val.id}</p>
                      <span>{val.id}</span>
                    </div>
                  </div>
                  <div className="detail_f_t">
                    <p>{val.id}</p>
                    <span>
                      <p></p>
                    </span>
                    <div>
                      <p>{val.id}天</p>
                      <p>{val.id}</p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          );
        });
      }
    render() {
        const {hasMore}=this.state
        return (
            <div>
                <ReactPullLoad
                  downEnough={150}
                  action={this.state.action}
                  handleAction={this.handleAction}
                  hasMore={hasMore}
                  distanceBottom={1000}
                >
               <ul className="cont">
                    {this.lists()}
                </ul>
                </ReactPullLoad>
            </div>
        );
    }
}

export default Home;