react h5端 下拉刷新和上拉加载组件

拉刷新和下拉刷新的两种方法（包括使用第三方库MJRefresh）一、使用苹果原生的方法1、下拉刷新2、上拉刷新(1首先要新建一个footer得XIB文件，当然同时包括对应的控制器文件，例如在XIB文件中可以如下拖拉对应的控件（2然后在代码文件中写一个实例方法+(instancetype)footer{return[[[NSBundlemainBundle]loadNibNamed:@"XIB文件名"owner:niloptions:nil]lastObject]}（3然后在我们的列表控制器中调用：/***集成上拉刷新控件*/-(void)refreshUpStateDateList{XBLoadMoreFooter*footer=[XBLoadMoreFooterfooter]footer.hidden=YES//一开始是要隐藏起来的，当scrollView拖拉到底部的时候我们才把它放出来self.tableView.tableFooterView=footer//其实就是相当于把这个XIB文件当作是tableView的Footer}（4上拉到底部的时候去调用刷新数据的方法二、使用第三方库MJRefresh1、下拉刷新遵守协议:,然后其实就是把它当成tableview的header来用2、下拉刷新3、需要注意：最后需要dealloc

上一篇文章已经对下拉刷新做了一些介绍，这篇文章主要讲上拉加载的实现思路，废话不多说，直入主题：

－。和下拉刷新类似，首先，创建一个UIScrollView的类拓展，和footerView文件

二。然后就是通过runtime来给UIScrollView添加属性（这个添加方法在上一篇有介绍）

三。第三步就是实现上拉加载：

这个DEMO是使用的RAC做的，RAC可以说把KVO封装的淋漓尽致，非常好用，有想要OC版本的可以在下面留言。然后就是隐藏上拉加载：

四。在状态等于RefreshStatusBeginRefresh时，调用下拉刷新回调来实现刷新数据。还需要一个停止刷新的方法，方法中主要重新设置一下视图的contentInset ＝ UIEdgeInsetsMake(0, 0, 50, 0)就可以了。下拉刷新的视图在headerView里面设置，如下：

上拉加载的实现思路大致就这么多，如果有问题，可以留言问我。

1、在options中加入如下参数代码（我的代码是在2470行）：

//原本就有的部分

HWCompositing: true,

useTransition: true,

useTransform: true,

//我加入的部分

minScrollY : 0,

minScrollX : 0

2、在下面不远处（十行以内）加入如下参数：

//新加部分

this.minScrollY = this.options.minScrollY

this.minScrollX = this.options.minScrollX

原先就有的部分

this.translateZ = this.options.HWCompositing &&utils.hasPerspective ? ' translateZ(0)' : ''

3、最后一处修改，在resetPosition方法内，此处直接贴上更改之后的方法，其实真正的修改只是将this.minScrollX修改成了（代码在2830行左右）:

resetPosition: function (time) {

var x = this.x,

y = this.y

time = time || 0

if ( !this.hasHorizontalScroll || this.x >this.minScrollX ) {

x = this.minScrollX

} else if ( this.x <this.maxScrollX ) {

x = this.maxScrollX

}

if ( !this.hasVerticalScroll || this.y >this.minScrollY ) {

y = this.minScrollY

} else if ( this.y <this.maxScrollY ) {

y = this.maxScrollY

}

if ( x == this.x &&y == this.y ) {

return false

}

this.scrollTo(x, y, time, this.options.bounceEasing)

return true

},

全部修改内容如上，调用的时候，只需要传入minScrollX、minScrollY参数便可实现下拉后回d上面的预留位置了。

注：对于scroll的滚动区域小于包裹容器的，iscroll禁止滚动，会造成无法实现下拉刷新，这里有一个小技巧，就是给滚动区域加一个min-height:101%

最后附上此次修改的dome下载地址，由于dome最初也是从别处拿的（最初的dome不能满足需求），其中的css布局方面个人觉得有些不好，但由于最近工作紧张也没有去改，暂时就先这样吧，有空会优化一下的。

---