iOS開發TableView網路請求及展示預載入實現範例

2022-07-19 22:02:01

引言

2022.02.11更新：新增了最簡單、高效和最推薦的方法。

2020.05.25更新：對總結進行了詳細的補充。

傳統的上拉載入更多

在iOS的開發過程中，如果用列表展示資料，此時一般的邏輯為上拉載入更多資料，配合MJRefresh就是在滑動到最底部時，觸發載入更多的網路請求。

滑動過程中預載入

如果希望體驗好一點，那麼可以在滑動的過程中，加入一個預載入機制，具體的做法如下：

方法1（最簡單、高效和最推薦）：

使用MJRefresh的特性（MJ大神已經替我們封裝好了，但是大多數人都不知道），在設定TableVIew的MJRefreshAutoFooter時，triggerAutomaticallyRefreshPercent這個屬性預設是1，我們來看看原始碼中是怎麼說的：

此時我們只需要一行程式碼：

MJRefreshAutoFooter *footer = [MJRefreshAutoFooter footerWithRefreshingTarget:weakSelf refreshingAction:@selector(loadMore)];
footer.triggerAutomaticallyRefreshPercent = -20; //關鍵的一行程式碼
self.tableView.mj_footer = footer;

將這個屬性設定為一個負數，意思就是當控制元件的底部出現-20時就自動重新整理，很明顯，-20的距離就代表還沒有滑動到底部，就觸發了重新整理了，這樣便完成了我們的預載入的需求。

方法2（自己計算實現，不推薦了）：

下滑（上拉）過程中，對當前scrollView（tableView）的剩餘可滑動距離（總滑動距離佔可滑動距離的）比例進行判斷，如果小於（大於）某個設定值，那麼就觸發網路請求（載入更多資料）。

這樣做的好處顯而易見，使用者不必再去多做一個上拉載入更多資料的操作了，如果我們需要展示的資料量非常大的話，那麼此種載入方式可以節省使用者大量的操作時間，大大提升了使用者的使用體驗。

下面是具體實現細節（此細節是針對上述方法2的）

方法2是作者之前自己研究出來的，但是後來發現MJ已經為我們實現了這麼好的方法，就用不到了。有興趣的同學可以看看方法2的具體實現：

1.我們需要在實現網路請求的類中新增一個Bool屬性，用來判定當前是否正在進行網路請求；

@property (nonatomic, assign) BOOL isLoadingDataBool; //是否正在請求資料

2.在scrollView的滑動代理方法中，處理預載入機制的邏輯

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (self.tableview.mj_footer.state == MJRefreshStateNoMoreData) {
        // 沒有更多資料，直接返回
        return;
    }
    
    // 預載入的計算邏輯，當滑動距離&gt;80%目前剩餘可滑動距離的時候，觸發預載入
    CGFloat threshold = 0.8; //設定的比例值
    CGFloat current = scrollView.contentOffset.y + ((scrollView.contentSize.height != scrollView.frame.size.height) ? scrollView.frame.size.height : 0); //當前滑動距離
    CGFloat total = scrollView.contentSize.height; //總的可滑動距離
    CGFloat ratio = current / total;
    if (ratio &gt;= threshold) { //滑動距離超過比例值
        [self requestDataList:NO showHUD:NO]; //發起載入更多網路請求
        self.isLoadingDataBool = YES; //設定正在網路請求狀態為YES（一定要寫在請求之後）
    }
}

3.處理網路請求

/// 發起網路請求
/// @param isReloadBool 是否為重新整理請求
/// @param isShowHUDBool 是否載入指示器 
- (void)requestDataList:(BOOL)isReloadBool showHUD:(BOOL)isShowHUDBool {
    if (self.isLoadingDataBool) {
       // 當前正在請求，直接返回
       return;
    }
    kWeakSelf(self);
    [DZCXHTTP requestWithResulted:^(BOOL isSuccessed, NSDictionary *dataDic, NSString *errorMsg) {
        kStrongSelf(self);
        strongself.isLoadingDataBool = NO; //請求完成，設定正在請求的狀態為NO
    }];
}