- 本節主題(網路部分-下拉/上拉重新整理)
- 原始碼地址在文章末尾
前言
經過十分鐘搭建主流框架_簡單的網路部分(OC)的介紹,相信你已經實現了基本的聯網獲取資料,但只是粗糙的獲取了固定的資料,下面就讓我們來實現下拉重新整理和上拉載入更多吧。同樣,我們先來做準備工作吧。
準備工作
Github尋找優秀的第三方重新整理框架
1.前人種樹,後人乘涼。有優秀的第三方框架可以使用,當然是極好的,可以大大提高我們的開發效率,如有特殊需求只能自己手寫就除外了
2.查閱第三方框架的README檔案(讀者自行閱讀)
3.使用cocoapods整合到自己的專案中
重新整理的基本實現思路
下拉重新整理
0.由於本文只關注功能的實現,先撇開原理,我們可以把重新整理理解為從伺服器載入最新的資料。
1.在viewDidLoad初始化下拉重新整理控制元件,並繫結下拉重新整理(請求網路資料)的方法,當觸發下拉重新整理,便會呼叫loadData方法。self.tableView.header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadData)];
2.在loadData內實現請求網路資料(詳見《十分鐘搭建主流框架_簡單的網路部分(OC)》)。
3.請求成功,停止重新整理控制元件[weakSelf.tableView.header endRefreshing];
4.請求失敗,停止重新整理控制元件[weakSelf.tableView.header endRefreshing];
上拉載入更多
0.由於我們的實現是MVC模式,可以簡單理解為:修改了模型的資料,View的介面展示也會隨之變化。
1.定義‘頁碼’屬性(用於載入下一頁所要傳遞的引數)@property (nonatomic,assign) NSInteger pn;
2.初始化上拉重新整理控制元件,並繫結上拉載入更多方法,當觸發上拉載入事件,便會呼叫loadMoreData方法。self.tableView.footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)];
3.在loadMoreData內實現載入更多資料的基本邏輯
(1)請求引數發生變化,加上params[@”pn”] = @(self.pn);
(2)在請求成功的block內增加‘頁碼’weakSelf.pn ++;
(3)在請求成功的block內使用新的模型陣列接收資料NSArray *array = [CYXMenu objectArrayWithKeyValuesArray:responseObject[@”result”]];並拼接到原陣列的尾部 [weakSelf.menus addObjectsFromArray:array];
(4)重新整理表格[weakSelf.tableView reloadData];
(5)停止重新整理控制元件[weakSelf.tableView.footer endRefreshing];
詳細實現步驟 上程式碼
(一)下拉
在setupTable內初始化頭部重新整理控制元件
1 2 3 |
// 頭部重新整理控制元件 self.tableView.header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(loadData)]; [self.tableView.header beginRefreshing]; |
實現loadData方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/** * 傳送請求並獲取資料方法 */ - (void)loadData{ [self.manager.tasks makeObjectsPerformSelector:@selector(cancel)]; self.pn = 1; // 請求引數(根據介面文件編寫) NSMutableDictionary *params = [NSMutableDictionary dictionary]; params[@"menu"] = @"蕃茄"; params[@"pn"] = @(self.pn); params[@"rn"] = @"10"; params[@"key"] = @"2ba215a3f83b4b898d0f6fdca4e16c7c"; // 在AFN的block內使用,防止造成迴圈引用 __weak typeof(self) weakSelf = self; [self.manager.responseSerializer setAcceptableContentTypes:[NSSet setWithObject:@"text/html"]]; [self.manager GET:CYXRequestURL parameters:params success:^(NSURLSessionDataTask * _Nonnull task, id _Nonnull responseObject) { NSLog(@"請求成功"); // 利用MJExtension框架進行字典轉模型 weakSelf.menus = [CYXMenu objectArrayWithKeyValuesArray:responseObject[@"result"]]; weakSelf.pn ++; // 重新整理資料(若不重新整理資料會顯示不出) [weakSelf.tableView reloadData]; [weakSelf.tableView.header endRefreshing]; } failure:^(NSURLSessionDataTask * _Nonnull task, NSError * _Nonnull error) { NSLog(@"請求失敗 原因:%@",error); [weakSelf.tableView.header endRefreshing]; }]; } |
(二)上拉
在setupTable內初始化上拉重新整理控制元件
1 2 |
// 尾部重新整理控制元件 self.tableView.footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(loadMoreData)]; |
實現loadMoreData方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/** * 載入更多資料 */ - (void)loadMoreData{ [self.manager.tasks makeObjectsPerformSelector:@selector(cancel)]; // 請求引數(根據介面文件編寫) NSMutableDictionary *params = [NSMutableDictionary dictionary]; params[@"menu"] = @"蕃茄"; params[@"pn"] = @(self.pn); params[@"rn"] = @"10"; params[@"key"] = @"2ba215a3f83b4b898d0f6fdca4e16c7c"; // 在AFN的block內使用,防止造成迴圈引用 __weak typeof(self) weakSelf = self; [self.manager.responseSerializer setAcceptableContentTypes:[NSSet setWithObject:@"text/html"]]; [self.manager GET:CYXRequestURL parameters:params success:^(NSURLSessionDataTask * _Nonnull task, id _Nonnull responseObject) { // 利用MJExtension框架進行字典轉模型 NSArray *array = [CYXMenu objectArrayWithKeyValuesArray:responseObject[@"result"]]; [weakSelf.menus addObjectsFromArray:array]; weakSelf.pn ++; // 重新整理資料(若不重新整理資料會顯示不出) [weakSelf.tableView reloadData]; [weakSelf.tableView.footer endRefreshing]; } failure:^(NSURLSessionDataTask * _Nonnull task, NSError * _Nonnull error) { NSLog(@"請求失敗 原因:%@",error); [weakSelf.tableView.footer endRefreshing]; }]; } |
到這裡已經簡單實現了下拉與上拉重新整理的功能,下次再討論更多的其他功能吧 ^_^
附:原始碼github地址