SVPullToRefresh使用

iOS中许多页面都是tableView，而不少tableView都需要提供下拉刷新、上拉加载等功能。MJRefresh和SVPullToRefresh是两个很好的第三方刷新控件。这里大概写一下自己利用SVPullToRefresh实现下拉刷新、上拉加载功能步骤。

• 创建tableView

- (CardTableView *)tableView
{
    if (!_tableView) {
        _tableView = [[CardTableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];
        _tableView.backgroundColor = [UIColor whiteColor];
        _tableView.clickCellDelegate = self;
        _tableView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0);
        _tableView.scrollIndicatorInsets = UIEdgeInsetsMake(64, 0, 0, 0);
    }
    return _tableView;
}

PS: 当你导航栏为半透明模糊风格时，contentInset和scrollIndicatorInsets属性你可能用的到

• viewDidLoad

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    self.title = @"帖子";
    self.view.backgroundColor = [UIColor whiteColor];
    
    self.automaticallyAdjustsScrollViewInsets = NO;//取消自动偏移
    self.loadMoreIndex = 0;
    self.isFirstLoad = YES;
    
    [self setupUI];//布局tableView方法
    [self setupErrorUI];//布局错误页面方法
    
    [self contentRefresh];//下拉刷新方法
    [self contentLoadMore];//上拉加载方法
    
    [self firstLoadData];//首次加载数据方法
    
}

#pragma mark -首次加载数据
- (void)firstLoadData
{
    self.currentIndex = 1;
    [self requestMyCardListData];
}

#pragma mark -下拉刷新
- (void)contentRefresh
{
    __weak typeof(self) weakSelf = self;
    
    [self.tableView addPullToRefreshWithActionHandler:^{
        __strong typeof(weakSelf) sself = weakSelf;
        
        sself.loadMoreIndex = 0;
        sself.currentIndex = 1;
        [sself requestMyCardListData];
    }];
    
}

#pragma mark -上拉加载
- (void)contentLoadMore
{
    __weak typeof(self) weakSelf = self;
    [self.tableView addInfiniteScrollingWithActionHandler:^{
        
        __strong typeof(weakSelf) sself = weakSelf;
        
        sself.loadMoreIndex ++;
        [sself requestMyCardListData];
    }];
}

//tableView约束

[self.view addSubview:self.tableView];
    [_tableView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.and.trailing.equalTo(@0);
        make.top.equalTo(self.mas_topLayoutGuideTop);
        make.bottom.equalTo(self.mas_bottomLayoutGuideTop);
    }];

• 数据: 这里模拟网络请求

- (void)requestMyCardListData
{
    //模拟网路请求
    MBProgressHUD *hud;
    if (self.isFirstLoad) {
        hud = [MBProgressHUD showHUDAddedTo:self.view animated:YES];
    }
    __weak typeof(self) weakSelf = self;
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        
        __strong typeof(weakSelf) sself = weakSelf;
        
        if (sself.isFirstLoad) {
            [hud hideAnimated:YES];
        }
        
        BOOL isSuccess = YES;
        if (isSuccess) {//请求成功
            
            sself.isFirstLoad = NO;
            
            if (sself.currentIndex == 1) {//下拉
                [sself.dataArray removeAllObjects];
                sself.tableView.showsInfiniteScrolling = YES;
            }
            
            sself.currentIndex += 1;
            
            NSInteger dataNum = 10;
            if (sself.loadMoreIndex == 2) {
                dataNum = 3;
            }
            
            NSMutableArray *array = [NSMutableArray array];
            for (int i = 0; i < dataNum; i ++) {
                CardModel *model = [[CardModel alloc] init];
                model.cardContent = [NSString stringWithFormat:@"内容%d", i];
                model.color = i;
                model.day = i + 2;
                model.month = i + 1;
                [array addObject:model];
            }
            
            [sself.dataArray addObjectsFromArray:array];
            
            sself.tableView.dataArray = sself.dataArray;
            [sself.tableView reloadData];
            
            if (sself.dataArray.count == 0) {
                sself.myErrorView.hidden = NO;
                sself.tableView.hidden = YES;
                sself.myErrorView.userInteractionEnabled = NO;
                
                sself.myErrorLabel.text = @"还没有发帖哦!";
                sself.myErrorBotLabel.hidden = YES;
            }else {
                sself.myErrorView.hidden = YES;
                sself.tableView.hidden = NO;
            }
            
            if (array.count < kPageSize) {//数据不足一页时 不显示上拉控件
                sself.tableView.showsInfiniteScrolling = NO;
            }
            
        }else {//error
            
            if (sself.dataArray.count > 0) {//如果已经有数据 错误提示
                sself.myErrorView.hidden = YES;
                sself.tableView.hidden = NO;
                
                //提示
                MBProgressHUD *hud = [MBProgressHUD showHUDAddedTo:sself.view animated:YES];
                [hud hideAnimated:YES afterDelay:2];
            }else {//没数据 错误页面 -点击重试
                sself.myErrorView.hidden = NO;
                sself.tableView.hidden = YES;
                sself.myErrorView.userInteractionEnabled = YES;
                sself.myErrorLabel.text = @"页面加载失败";
                sself.myErrorBotLabel.hidden = NO;
            }
        }
        
        [sself.tableView.pullToRefreshView stopAnimating];
        [sself.tableView.infiniteScrollingView stopAnimating];
        
    });
}

PS: 每次下拉 成功回调显示上拉加载控件(因为暂时不知是否还有数据), 页码增加: sself.currentIndex += 1; 判断每次加载得到的数据是否够一页的数据，若不足一页数据则说明数据加载完毕，不显示上拉控件；最后 结束下拉或上拉

另外，需要注意的是，需要先reload 然后再隐藏上拉加载控件，否则上拉成功后， 页面会向下滑动一定距离，新加载出来的数据不显示在可视页面上，需要手动上拉才显示

即:

[sself.tableView reloadData];//reloadData在tableView.showsInfiniteScrolling前面执行

sself.tableView.showsInfiniteScrolling = NO;

若reloadData在隐藏上拉加载控件后执行效果:

后reloadData.gif

当第二次上拉数据成功后 页面向下滑动了一段距离 新加载的数据未显示在可视页面上

先reloadData然后隐藏上拉控件:

先reloadData后隐藏上拉控件.gif

代码