react-loadmore-webapp

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>
 
    )
 
  }
 
}

有问题反馈

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

• 邮件:[e-mail]
• QQ: 918035829