react 下拉刷新和上拉加载更多

react 下拉刷新和上拉加载更多

场景:

记录总条数:100条

每页显示10条

策略:

下拉刷新时,永远只查询第一页,即start 总是从0开始.

第一次下拉,start为0,

第二次下拉,start仍然为0.

上拉时,start 为当前显示的总条数.

第一次上拉,start为10,

第二次上拉,start为20,

第三次上拉,start为30,

即,上拉时不会修改已经显示的记录,只是在原有基础上增加

实际案例

下拉刷新:

 

上拉加载更多

 

总结:下拉是全量更新;上拉是增量更新

实际案例:

 <RefreshWrapper ref="scrollDiv"
                    refreshHandler={this.onRefresh.bind(this)}
                    moreHandler={this.onLoadMore.bind(this)}
                    scrollHandler={throttle(this.scrollHandler,300,500).bind(this)}
                >
                    {content}
                   
                </RefreshWrapper>