下拉加载组件，react，

react组件，进行页面的下拉加载。包括type=0“加载更多。”，type=1“正在加载中。。。”，type=2“没有更多数据” 。

父 组件引用代码如下

import AppPullRefresh from '@/component/pull-refresh'




const {pageSize, pageData, type} = this.state


        {pageData.map((item, index) => {
          return (
            

              // 渲染list的数据
              {item.value}
            
          )
        })}

子组件代码部分如下

import React, { Component } from 'react';

import T from 'prop-types';

import _ from 'lodash'



import './index.less'



class PullRefresh extends Component {

handleScroll = () => {

if (this.props.count < this.props.pageSize) return

if (this.props.type === 1 || this.props.type === 2) return



const wrap = this.refs['pull-refresh']

const currentScroll = wrap.scrollTop + wrap.clientHeight



// 触底

if (currentScroll >= (wrap.scrollHeight - 10)) {

this.loadData()

}

}



handleLoadClick = () => {

this.loadData()

}



loadData = () => {

this.props.onPullRefresh()

}



renderLoading () {

switch (this.props.type) {

case 0: // 加载更多

return 
显示更多

case 1: // 加载中

return (





加载中...



)

case 2: // 无样式

// return null

return 
没有更多了

}

}



render () {

return (





{this.props.children}





{/* 大于分页数据才显示loading */}

{this.props.count >= this.props.pageSize ? (



{this.renderLoading()}



) : null}



)

}

}



PullRefresh.propTypes = {

className: T.string,

children: T.any,

onPullRefresh: T.func.isRequired,

type: T.oneOf([0, 1, 2]),

count: T.number.isRequired,

pageSize: T.number.isRequired,

}



export default PullRefresh