使用Scrollbar组件实现滚动加载下一页数据

效果图：

 

如果还有数据，显示正在加载中，没有下一页数据了显示无更多数据

做法：

在state中设置表头信息structure、数据列表list、是否加载下一页isLoad

state={
    structure: [
      {
        name: '排名',
        width: '15%',
        key: 'order',
        textAlign: 'center',
        formatter: (data, i) =>
          <span className={styles.order} style={{
            color: this.getColor(i),
            fontWeight: i < 3 ? 'bold' : 'normal',
            fontStyle: i < 3 ? 'italic' : 'normal',
          }}>
            {i + 1}
          </span>,
      }, {
        name: '企业名称',
        width: '70%',
        key: 'enterprise',
      }, {
        name: '人才',
        width: '15%',
        key: 'num',
        textAlign: 'center',
        formatter: (data, i) =>
          <span>
            {data.num}人
          </span>,
      },
    ],
    list:[],
    isLoad:false,//是否加载下一页
}

设置this属性

pageIndex=1//page初始化
pageSize=20//每页获取条数
isfinsh=false//是否加载完成

表头设置

<div className={styles.head}>
    {
        structure.map(s =>
            <div key={s.key} className={styles.col} style={{ width: s.width, textAlign: 'center' }}>
            {s.name}
            </div>,
        )
    }
</div>

表体设置：

Scrollbar的scroll是滚动到最底部触发。list遍历。isLoad用于展示当前是加载下一页还是无下一页。Icon是antd引入的

<Scrollbar className={styles.listBody} scroll={this.scroll.bind(this)}>
    {
        list.map((l, i) =>{
            return (
            <div key={i} className={styles.row}>
                {
                structure.map(s =>
                <div key={s.key} className={styles.col} style={{ width: s.width, textAlign: s.textAlign }}>
                {s.formatter ? s.formatter(l, i) : l[s.key]}
                </div>)
                }
            </div>
            )
        })
    }
    {
        this.state.isLoad?
        <div className={styles.loading}>
            <Icon type='loading' size='xxs'/>
            <span>正在加载中...</span>
        </div>
        :
        <div className={styles.noMore}>暂无更多数据</div>
    }
</Scrollbar>

滚动到最底部scroll函数：要做判断，若当前未在加载下一页且未完成全部加载，则将isLoad变为true，防止scroll多次触发产生多次请求，就是一种防抖方式。开始一次请求。

scroll(e){
    if(!this.state.isLoad && !this.isfinsh){
        this.state.isLoad=true
        this.pageIndex++
        this.setState({isLoad:true},()=>{
            this.getIndex()//请求
        })
    }
}

请求时将数据拼接到list中。

componentDidMount() {
    this.getIndex()//刚进页面一次请求
}
//请求
getIndex(){
    this.props.dispatch({ type: 'xxx/getIndex',payload:{
        pageSize:this.pageSize,
        pageIndex:this.pageIndex,
    }}).then(data=>{
        if(data.Code===2000){
            this.setState({isLoad:false})//请求到数据后变为不加载状态
            if(data.Data.length==0){
                this.isfinsh=true//请求的数据没有了，就表示完成
                return;
            }
            let list=this.state.list||[]
            this.setState({list:list.concat(data.Data)})//将新的数据拼到原数组中
        }
    });
}

 

Scrollbar滚动条的实现：https://www.cnblogs.com/wuhairui/p/13673408.html