MJRefresh (Footer ) API

接着上一章,我们继续了解MJRefresh。上一篇文章中我们了解了MJRefresh的主要类,以及他们之间的关系,了解了Header的各种使用方法。这一篇文章中,我们继续一起学习Footer的各种类型以及用法。

先来看下有几种footer
base中有三种:


img_8287632aa2ba048f448f5601341e3c81.png
image.png

custom中有六种


img_dc12d687499095e38ea4eb568f62b116.png
image.png

他们之间的关系如下:


img_76c3b20e4a56d925ca7d1b4e80599ee3.png
image.png

下面我们一起来看下,这么多Footer类,都是做什么的。

1、MJRefreshFooter
效果:没有效果,也不会刷新
用法:

//没有效果,也不会刷新
-(void)refreshNone{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

2、MJRefreshBackFooter
效果:
没有任何刷新的UI,但是有刷新效果。
用法:

//没有任何刷新的UI,但是有刷新效果
-(void)refreshBack{
      __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshBackFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果:


img_e23f5d76f59dc1868099a96c8cebec55.gif
11.gif

3、MJRefreshBackGifFooter
效果:有文字刷新状态,有刷新效果
用法:

//有文字刷新状态,有刷新效果
-(void)refreshBackGif{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshBackGifFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果:


img_02c73a430c518516aaf8a9062c8bc44b.gif
12.gif

4、MJRefreshBackStateFooter
效果:和MJRefreshBackGifFooter 一样 只有文字刷新状态,有刷新效果。
用法:

//和MJRefreshBackGifFooter 一样 只有文字刷新状态,有刷新效果
-(void)refreshBackState{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshBackStateFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果:


img_2873a78f4463ded5b778135aeab24536.gif
13.gif

5、MJRefreshBackNormalFooter
效果:有文字状态也有图片,有刷新效果
用法:

//有文字状态也有图片,有刷新效果
-(void)refreshBackNormal{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果:


img_0869003a94256af74e9de44baf75f272.gif
QQ20171127-110154.gif

6、MJRefreshAutoFooter
效果:没有任何UI,但是有刷新效果,和MJRefreshBackFooter一样。
用法:

//没有任何UI,但是有刷新效果
-(void)refreshAuto{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshAutoFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果:
参见 2、MJRefreshBackFooter

7、MJRefreshAutoGifFooter
效果:有文字,有刷新效果。和MJRefreshBackGifFooter类似,但是和MJRefreshBackGifFooter的位置不一样。
用法:


//有文字,有效果,注意:这个文字是紧跟最后一个有数据的cell的位置,并不是隐藏起来的
-(void)refreshAutoGif{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshAutoGifFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果:


img_2a8f26d2ae54bca37efd7a10dfbdc130.gif
12.gif

8、MJRefreshAutoStateFooter
效果:有文字,有效果,和MJRefreshAutoGifFooter一个效果。
用法:

//有文字,有效果,和MJRefreshAutoGifFooter一个效果
-(void)refreshAutoState{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshAutoStateFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果:
参见MJRefreshAutoGifFooter。

9、MJRefreshAutoNormalFooter
效果:有文字,刷新时候有小菊花图片,有刷新效果。
用法:

//有文字,刷新有图片,有刷新效果。
-(void)refreshAutoNormal{
    __weak UpRefreshController * weakSelf = self;
    self.tableView.mj_footer = [MJRefreshAutoNormalFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
}

运行效果:


img_c45983e05f16cf884cccdab86596eee4.gif
13.gif

看到了吗?多了个小菊花。

10、带动图的刷新

直接看图吧:


img_3bd26adbb0b0dd33c16ad166eac77d19.gif
14.gif

用法:

-(void)refreshAnimationGif{
    __weak UpRefreshController * weakSelf = self;
    MJRefreshAutoGifFooter * footer = [MJRefreshAutoGifFooter footerWithRefreshingBlock:^{
        [weakSelf loadDataMore];
        [weakSelf.tableView reloadData];
        [weakSelf endRefresh];
    }];
    
    //设置正在刷新状态的动画图片
    NSMutableArray * refreshingImages = [NSMutableArray array];
    for (NSUInteger i = 1; i<=3; i++) {
        UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"dropdown_loading_0%zd",i]];
        [refreshingImages addObject:image];
    }
    [footer setImages:refreshingImages forState:MJRefreshStateRefreshing];
    
    self.tableView.mj_footer = footer;
}

总结:

1.MJRefreshAutoFooter系列和MJRefreshBackFooter系列的区别就是刷新控件的位置不同,一个是在底部,一个是紧挨着cell。

我们了解了MJRefresh的header和Footer的基本类以及用法。之后,我们会逐步的了解它的实现原理以及源码,看看到底是如何实现的这些效果。我们自己是否也能实现呢?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值