react实现下拉加载更多 (组件 react-pullLoad)

先安装

npm install --save react-pullload

在你创建的js文件中引入

import axios from 'axios';
import React from 'react';
import ReactPullLoad, { STATS } from "react-pullload";

export default class NewsList extends React.Component{
    constructor(){
        super();
        this.state = {
            //导航
            navdata:[],
            //新闻列表
            newscon:[],
            //序列值
            currentIndex: 0,
            //页码数
            page:1,
            //导航id
            dataid:'',
            hasMore: true,
            action: STATS.init,
            index: 1, //loading more test time limit
            
        }
        this.setCurrentIndex = this.setCurrentIndex.bind(this)
    };
    handleAction = action => {
        //new action must do not equel to old action
        if (action === this.state.action) {
          return false;
        }
     
        if (action === STATS.refreshing) {
        //   this.handRefreshing();
            return
        } 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;
    //     }
    //     console.log(this.state.dataid);
    //     setTimeout(() => {
    //       //refreshing complete
    //       this.setState({
    //         newsconL:[],
    //         hasMore: true,
    //         action: STATS.refreshed,
    //         index: 1
    //       });
    //     }, 3000);
     
    //     this.setState({
    //       action: STATS.refreshing
    //     });
    //   };
     //上划加载更多
      handLoadMore = () => {
        if (STATS.loading === this.state.action) {
          return false;
        }
        //无更多内容则不执行后面逻辑
        if (!this.state.hasMore) {
          return;
        }
     
        setTimeout(() => {
          if (this.state.index === 0) {
            this.setState({
              action: STATS.reset,
              hasMore: false
            });
          } else {
            //执行下拉加载
            //页码数
            this.state.page++
            const PageNum = this.state.page
            const _this = this;
            //请求的新闻列表id
        	const id = this.state.dataid
            axios.get('url你的请求数据接口='+id,{
                params: {
                    page: PageNum,
                    size: 20,
                },
            })
            .then(function(res){
                _this.setState({
                    newscon:_this.state.newscon.concat(res.data.data),
                    action: STATS.reset,
                    // index:this.state.index+1
                })
            })
            .catch(function(error){
                _this.setState({
                    error:error
                })
            })
           
          }
        }, 1000);
     
        this.setState({
          action: STATS.loading
        });
      };

   //点击导航获取数据
    setCurrentIndex(event) {
        //每次点击导航让滚动条距离顶部的距离为0
        document.documentElement.scrollTop = 0
        //获取index值添加高亮
        this.setState({
            currentIndex: parseInt(event.currentTarget.getAttribute('index'), 10)
        })
        //获取数据id
        this.state.dataid=parseInt(event.currentTarget.getAttribute('data-id'))
        //get请求数据
        //改变this指向
        const _this = this
        //请求的新闻列表id
        const id = this.state.dataid
        axios.get('url你的请求数据接口='+id,{
            params: {
                page: 1,
                size: 20,
            },
        })
        .then(function(res){
            //每次点击导航页码数重置为1
            _this.state.page = 1;
            _this.setState({
                newscon:res.data.data,
            })
        })
        .catch(function(error){
            _this.setState({
                error:error
            })
        })
    }
    render(){
        const {newscon,hasMore} = this.state;
        return(
            <div>
                {/* 导航 */}
                <header className="header">
                    <ul>
                        {this.state.navdata.map((item,i)=>{
                        return(
                        // "active_a",this.state.currentIndex === i?"active":null  实现高亮
                            <li key={i} index={i}  onClick={this.setCurrentIndex} className={"active_a",this.state.currentIndex === i?"active":null} data-id={item.cate_id}>
                                {item.cate_name}
                                <span></span>
                            </li>
                        )
                    })}
                    </ul>
                </header>
                {/* 新闻列表 */}
                <ReactPullLoad
                    downEnough={100}
                    action={this.state.action}
                    handleAction={this.handleAction}
                    hasMore={hasMore}
                    distanceBottom={1000}
                >
                    <ul className="news-ul">
                        {newscon.map((item,i)=>{
                            return(
                                <div>
                                    {/* 判断渲染数据 */}
                                    {item.all_img.length === 3?
                                        <li className="newslist3">
                                            <div className="new-tt">{item.title}</div>
                                            <div className="pic3">
                                                <img src={item.all_img[0]} />
                                                <img src={item.all_img[1]} />
                                                <img src={item.all_img[2]} />
                                            </div>
                                        </li>:
                                        <li className="newslist1">
                                            <img src={item.litpic[0]} />
                                            <div className="new-tt">{item.title}</div>
                                        </li>
                                    }
                                </div>
                            )
                            
                        })}
                    </ul>  
                </ReactPullLoad>     
            </div>
            
        )    
    }
    //get请求数据
    componentDidMount(){
        const _this = this;
        axios.get('url你的请求数据接口')
        .then(function(res){
            console.log(res);
            _this.setState({
                //导航
                navdata:res.data.data,
                //新闻列表
                newscon:res.data.data[0].data,
                //首次获取新闻id
                dataid:res.data.data[0].cate_id
            })
        })
        .catch(function(error){
            _this.setState({
                error:error
            })
        })
    }
}

import “node_modules/react-pullload/dist/ReactPullLoad.css”
这个引入的时候会报错就把css单独拿出来自己写
我用的rem,也可以自己随便改

 /* 下拉加载 */
  .pull-load {
    position: relative;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .pull-load-head {
    position: absolute;
    transform: translate3d(0px, -100%, 0px);
    width: 100%;
  }
  .state-refreshing .pull-load-head,
  .state-refreshed .pull-load-head {
    position: relative;
    transform: none;
  }
  .pull-load-body {
    position: relative;
  }
  .state-refreshing .pull-load-body {
    transition: transform 0.2s;
  }
  .state-reset .pull-load-body {
    transition: transform 0.2s;
  }
  /*
   * HeadNode default UI
   */
  .pull-load-head-default {
    text-align: center;
    font-size: 12px;
    line-height: 3rem;
    color: #7676a1;
  }
  .state-pulling .pull-load-head-default:after {
    content: '下拉刷新';
  }
  .state-pulling.enough .pull-load-head-default:after {
    content: '松开刷新';
  }
  .state-refreshing .pull-load-head-default:after {
    content: '正在刷新...';
  }
  .state-refreshed .pull-load-head-default:after {
    content: '刷新成功';
  }
  .state-pulling .pull-load-head-default {
    opacity: 1;
  }
  .state-pulling .pull-load-head-default i {
    display: inline-block;
    font-size: .28rem;
    margin-right: .6em;
    vertical-align: middle;
    height: .12rem;
    border-left: 1px solid;
    position: relative;
    transition: transform .3s ease;
  }
  .state-pulling .pull-load-head-default i:before,
  .state-pulling .pull-load-head-default i:after {
    content: '';
    position: absolute;
    font-size: .5em;
    width: .12rem;
    bottom: 0px;
    border-top: 1px solid;
  }
  .state-pulling .pull-load-head-default i:before {
    right: 1px;
    transform: rotate(50deg);
    transform-origin: right;
  }
  .state-pulling .pull-load-head-default i:after {
    left: 0px;
    transform: rotate(-50deg);
    transform-origin: left;
  }
  .state-pulling.enough .pull-load-head-default i {
    transform: rotate(180deg);
  }
  .state-refreshing .pull-load-head-default i {
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    font-size: 1.5rem;
    width: .15rem;
    height: .15rem;
    border: 2px solid #9494b6;
    border-top-color: #fff;
    border-radius: 100%;
    animation: circle .8s infinite linear;
  }
  .state-refreshed .pull-load-head-default {
    opacity: 1;
    transition: opacity 1s;
  }
  .state-refreshed .pull-load-head-default i {
    display: inline-block;
    box-sizing: content-box;
    vertical-align: middle;
    margin-right: 10px;
    font-size: 20px;
    height: 1em;
    width: 1em;
    border: 1px solid;
    border-radius: 100%;
    position: relative;
  }
  .state-refreshed .pull-load-head-default i:before {
    content: '';
    position: absolute;
    top: 3px;
    left: 7px;
    height: 11px;
    width: 5px;
    border: solid;
    border-width: 0 1px 1px 0;
    transform: rotate(40deg);
  }
  .pull-load-footer-default {
    text-align: center;
    font-size: 12px;
    line-height: .36rem;
    color: #7676a1;
  }
  .state-loading .pull-load-footer-default:after {
    content: '加载更多';
  }
  .pull-load-footer-default.nomore:after {
    content: '没有更多';
  }
  .state-loading .pull-load-footer-default i {
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    font-size: 1.5rem;
    width: .12rem;
    height: .12rem;
    border: 2px solid #9494b6;
    border-top-color: #fff;
    border-radius: 100%;
    animation: circle .8s infinite linear;
  }
  @keyframes circle {
    100% {
      transform: rotate(360deg);
    }
  }

附上中文链接:react-pullLoad