快捷導(dǎo)航

iOS上下拉刷新控件MJRefresh使用方法詳解

更新時(shí)間：2017年03月01日 11:38:34 作者：34碼的小孩子

這篇文章主要為大家詳細(xì)介紹了iOS上下拉刷新控件MJRefresh的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

MJRefresh是一個(gè)好用的上下拉刷新的控件，github地址如下：https://github.com/CoderMJLee/MJRefresh很多app都使用這個(gè)控件，我們也來(lái)了解一下它的用法。下面主要是介紹在UITableView下的使用。

使用

在github上下載之后，將MJRefresh文件添加到項(xiàng)目中，并且在需要使用的文件上引入MJRefresh.h。然后在該文件的viewDidLoad方法中指定tableView的header和footer，如下：

#import "MJRefreshTableViewController.h"
#import "MJRefresh.h"

@interface MJRefreshTableViewController ()
@property (strong, nonatomic) IBOutlet UITableView *tableView;
@end

@implementation MJRefreshTableViewController

- (void)viewDidLoad {
[super viewDidLoad];

__weak typeof(self) weakSelf = self;
self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
 //刷新時(shí)候，需要執(zhí)行的代碼。一般是請(qǐng)求最新數(shù)據(jù)，請(qǐng)求成功之后，刷新列表
 [weakSelf loadNewData];
}];

self.tableView.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{
 //刷新時(shí)候，需要執(zhí)行的代碼。一般是請(qǐng)求更多數(shù)據(jù)，請(qǐng)求成功之后，刷新列表
 [weakSelf loadNoreData];
}];
}

/**
 請(qǐng)求獲取最新的數(shù)據(jù)
 */
- (void)loadNewData {
NSLog(@"請(qǐng)求獲取最新的數(shù)據(jù)");

//這里假設(shè)2秒之后獲取到了最新的數(shù)據(jù)，刷新tableview，并且結(jié)束刷新控件的刷新?tīng)顟B(tài)
__weak typeof(self) weakSelf = self;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
 //刷新列表
 [weakSelf.tableView reloadData];
 //拿到當(dāng)前的刷新控件，結(jié)束刷新?tīng)顟B(tài)
 [weakSelf.tableView.mj_header endRefreshing];
});
}

/**
 請(qǐng)求獲取更多的數(shù)據(jù)
 */
- (void)loadNoreData {
NSLog(@"請(qǐng)求獲取更多的數(shù)據(jù)");

//這里假設(shè)2秒之后獲取到了更多的數(shù)據(jù)，刷新tableview，并且結(jié)束刷新控件的刷新?tīng)顟B(tài)
__weak typeof(self) weakSelf = self;
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
 //刷新列表
 [weakSelf.tableView reloadData];
 //拿到當(dāng)前的刷新控件，結(jié)束刷新?tīng)顟B(tài)
 [weakSelf.tableView.mj_footer endRefreshing];
});
}
@end

按照app的實(shí)際情況來(lái)說(shuō)，loadNoreData 和 loadNewData方法應(yīng)該是發(fā)送數(shù)據(jù)請(qǐng)求，而結(jié)束刷新控件的刷新?tīng)顟B(tài)應(yīng)該是在請(qǐng)求失敗或者請(qǐng)求成功的方法中調(diào)用。

如果是帶動(dòng)圖的刷新控件的話(huà)，就直接替換在viewDidLoad中的寫(xiě)法即可。

- (void)viewDidLoad {
[super viewDidLoad];

__weak typeof(self) weakSelf = self;
MJRefreshGifHeader *header = [MJRefreshGifHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadNewData)];

[header setImages:idleImages forState:MJRefreshStateIdle];
[header setImages:pullingImages forState:MJRefreshStatePulling];
[header setImages:refreshingImages forState:MJRefreshStateRefreshing];

self.tableView.mj_header = header;
}

其中idleImages，pullingImages，refreshingImages是圖片數(shù)組，分別對(duì)應(yīng)普通閑置狀態(tài)，松開(kāi)就可以進(jìn)行刷新的狀態(tài)，正在刷新中的狀態(tài)等的圖片。注意，idleImages等圖片數(shù)組存儲(chǔ)的對(duì)象是UIImage。

如果只設(shè)置了refreshingImages，只要在刷新?tīng)顟B(tài)下顯示圖片，其他狀態(tài)不顯示圖片。如果設(shè)置了idleImages或者pullingImages其中之一，所有狀態(tài)下都顯示設(shè)置的圖片。
同理，設(shè)置底部帶動(dòng)畫(huà)效果的footer：

- (void)viewDidLoad {
[super viewDidLoad];

MJRefreshBackGifFooter *footer = [MJRefreshBackGifFooter footerWithRefreshingTarget:self refreshingAction:@selector(endRefreshing)];

[footer setImages:idleImages forState:MJRefreshStateIdle];
[footer setImages:pullingImages forState:MJRefreshStatePulling];
[footer setImages:refreshingImages forState:MJRefreshStateRefreshing];

self.tableView.mj_footer = footer;
}

PO一張效果圖：

header.stateLabel.hidden = YES;
header.lastUpdatedTimeLabel.hidden = YES;

如果隱藏右邊狀態(tài)或者更新時(shí)間其中一行文字，則顯示的一行文字會(huì)垂直居中，效果如下：

如果把右邊的兩行文字都隱藏了，只顯示圖片，則圖片居中，效果如下：

如果覺(jué)得動(dòng)畫(huà)頻率過(guò)快或者過(guò)低，可以修改MJRefresh以下位置。

使用以下方法還可以修改顯示文字

[header setTitle:@"下拉刷新" forState:MJRefreshStateIdle];
[header setTitle:@"釋放開(kāi)始刷新哦~" forState:MJRefreshStatePulling];
[header setTitle:@"正在快馬加鞭地刷新著呢" forState:MJRefreshStateRefreshing];

其他控件的用法

UICollectionView 和UIScrollView的用法與UITableView的用法一致，只需將上面所說(shuō)的tableView.mj_header 改成 collectionView.mj_header 和 scrollView.mj_header 即可。例如：

self.collectionView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
 //刷新時(shí)候，需要執(zhí)行的代碼。一般是請(qǐng)求最新數(shù)據(jù)，請(qǐng)求成功之后，刷新列表
 [weakSelf loadNewData];
}];
self.scrollView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
 //刷新時(shí)候，需要執(zhí)行的代碼。一般是請(qǐng)求最新數(shù)據(jù)，請(qǐng)求成功之后，刷新列表
 [weakSelf loadNewData];
}];

又因UIWebView 自帶一個(gè)UIScrollView的屬性，所以UIWebView也可以使用MJRefresh，用法如下：

self.webView.scrollView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
 //刷新時(shí)候，需要執(zhí)行的代碼。一般是請(qǐng)求最新數(shù)據(jù)，請(qǐng)求成功之后，刷新列表
 [weakSelf loadNewData];
}];

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: