##react-loadmore-webapp是什么? 一款基于React的 移动端 上拉加载更多 组件。

##react-loadmore-webapp使用？

引入：

import DropToLoad from 'react-loadmore-webapp';

参数:

fetchData //请求数据的方法
loaidngEle //加载动画，类型元素 eg: <div>loading</div>
triggerDistance // 触发加载事件的距离底部距离，默认 20
bottomWord //加载完成显示的文字，可选
data:{
	isFetch:false, //如果正在请求, 设置isFetch = true, 防止多次请求
	haveMore:true, //当返回的数据 小于 pagesize， 设置 haveMore = true
}

示例:

  this.state = {
    dataArr:[],
    pageSize:10,
    pageIndex:1,
    isFetch:false,
    haveMore:true
  }

  fetchData(){

      this.setState({
        isFetch:true
      })

      fetch(...)
        .then(res=>{
          
           this.setState({
              dataArr:this.state.dataArr.concat(res);
              isFetch:false,
              haveMore:res.length >= this.state.pageSize
              pageIndex:this.state.pageIndex + 1
            })

        })

  }

  render(){

    const data = {
        isFetch:this.state.isFetch,
        haveMore:this.state.haveMore
    }

    return(

      <DropToLoad data={data} fetchData={fetchData}>
        //该位置为 循环的列表
      </DropToLoad>

    )

  }

}

##有问题反馈 在使用中有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流

• 邮件:[email protected]
• QQ: 918035829