TableView 網絡請求/展示預加載

2022.02.11更新:新增了最簡單、高效和最推薦的方法。
2020.05.25更新:對總結進行了詳細的補充。

傳統(tǒng)的上拉加載更多

在iOS的開發(fā)過程中淤击,如果用列表展示數據,此時一般的邏輯為上拉加載更多數據荣回,配合MJRefresh就是在滑動到最底部時遭贸,觸發(fā)加載更多的網絡請求。


上拉加載更多.gif

滑動過程中預加載

如果希望體驗好一點心软,那么可以在滑動的過程中,加入一個預加載機制著蛙,具體的做法如下:

方法1(最簡單删铃、高效和最推薦):

使用MJRefresh的特性(MJ大神已經替我們封裝好了,但是大多數人都不知道)踏堡,在設置TableVIew的MJRefreshAutoFooter時猎唁,triggerAutomaticallyRefreshPercent這個屬性默認是1,我們來看看源代碼中是怎么說的:

MJRefresh源代碼

此時我們只需要一行代碼:

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

將這個屬性設置為一個負數顷蟆,意思就是當控件的底部出現(xiàn)-20時就自動刷新诫隅,很明顯腐魂,-20的距離就代表還沒有滑動到底部,就觸發(fā)了刷新了逐纬,這樣便完成了我們的預加載的需求蛔屹。

方法2(自己計算實現(xiàn),不推薦了):

下滑(上拉)過程中豁生,對當前scrollView(tableView)的剩余可滑動距離(總滑動距離占可滑動距離的)比例進行判斷兔毒,如果小于(大于)某個設定值,那么就觸發(fā)網絡請求(加載更多數據)甸箱。


滑動預加載.gif
  • 這樣做的好處顯而易見育叁,用戶不必再去多做一個上拉加載更多數據的操作了,如果我們需要展示的數據量非常大的話芍殖,那么此種加載方式可以節(jié)省用戶大量的操作時間豪嗽,大大提升了用戶的使用體驗。

下面是具體實現(xiàn)細節(jié)(此細節(jié)是針對上述方法2的)

方法2是作者之前自己研究出來的豌骏,但是后來發(fā)現(xiàn)MJ已經為我們實現(xiàn)了這么好的方法昵骤,就用不到了。有興趣的同學可以看看方法2的具體實現(xiàn):

1.我們需要在實現(xiàn)網絡請求的類中添加一個Bool屬性肯适,用來判定當前是否正在進行網絡請求变秦;

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

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

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (self.tableview.mj_footer.state == MJRefreshStateNoMoreData) {
        // 沒有更多數據框舔,直接返回
        return;
    }
    
    // 預加載的計算邏輯蹦玫,當滑動距離>80%目前剩余可滑動距離的時候,觸發(fā)預加載
    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 >= threshold) { //滑動距離超過比例值
        [self requestDataList:NO showHUD:NO]; //發(fā)起加載更多網絡請求
        self.isLoadingDataBool = YES; //設置正在網絡請求狀態(tài)為YES(一定要寫在請求之后)
    }
}

3.處理網絡請求

/// 發(fā)起網絡請求
/// @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; //請求完成樱溉,設置正在請求的狀態(tài)為NO
    }];
}

總結

這個預加載其實不難,但是有幾個細節(jié)的地方需要處理好:
1.第二步scrollView的代理方法中計算當前滑動時纬凤,一定要判斷當前的contenntSize是否等于scrollView的高度福贞,如果等于的話證明scrollView是剛剛開始滑動,還沒有過一屏的距離停士,此時在計算當前滑動的距離時挖帘,就不能加上scrollView的高度;
2.當滑動的比例值超出我們設定值的時候恋技,移動要先發(fā)起網絡請求拇舀,再設置正在網絡請求的狀態(tài)為YES,因為在網絡請求中會對該狀態(tài)進行判斷蜻底,如果為YES的話直接就return了骄崩;
3.在網絡請求的完成回調中,別忘記了將正在網絡請求的狀態(tài)改回為NO。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末要拂,一起剝皮案震驚了整個濱河市抠璃,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌脱惰,老刑警劉巖搏嗡,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異枪芒,居然都是意外死亡彻况,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進店門舅踪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來纽甘,“玉大人,你說我怎么就攤上這事抽碌『酚” “怎么了?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵货徙,是天一觀的道長左权。 經常有香客問我,道長痴颊,這世上最難降的妖魔是什么赏迟? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮蠢棱,結果婚禮上锌杀,老公的妹妹穿的比我還像新娘。我一直安慰自己泻仙,他們只是感情好糕再,可當我...
    茶點故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著玉转,像睡著了一般突想。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上究抓,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天猾担,我揣著相機與錄音,去河邊找鬼漩蟆。 笑死垒探,一個胖子當著我的面吹牛,可吹牛的內容都是我干的怠李。 我是一名探鬼主播,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼捺癞!你這毒婦竟也來了夷蚊?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤髓介,失蹤者是張志新(化名)和其女友劉穎惕鼓,沒想到半個月后,有當地人在樹林里發(fā)現(xiàn)了一具尸體唐础,經...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡箱歧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了一膨。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片呀邢。...
    茶點故事閱讀 40,503評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖豹绪,靈堂內的尸體忽然破棺而出价淌,到底是詐尸還是另有隱情,我是刑警寧澤瞒津,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布蝉衣,位于F島的核電站,受9級特大地震影響巷蚪,放射性物質發(fā)生泄漏病毡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一屁柏、第九天 我趴在偏房一處隱蔽的房頂上張望啦膜。 院中可真熱鬧,春花似錦前联、人聲如沸功戚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽啸臀。三九已至,卻和暖如春烁落,著一層夾襖步出監(jiān)牢的瞬間乘粒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工伤塌, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留灯萍,地道東北人。 一個月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓每聪,卻偏偏與公主長得像旦棉,于是被迫代替她去往敵國和親齿风。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,512評論 2 359

推薦閱讀更多精彩內容