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然后隐藏上拉控件: