iOS开发TableView网络请求及展示预加载实现示例

目录
  • 引言
  • 传统的上拉加载更多
  • 滑动过程中预加载
    • 方法1(最简单、高效和最推荐):
    • 方法2(自己计算实现,不推荐了):
  • 下面是具体实现细节(此细节是针对上述方法2的)
  • 总结

引言

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;
    }

    // 预加载的计算逻辑,当滑动距离>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 >= 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
    }];
}

总结

这个预加载其实不难,但是有几个细节的地方需要处理好:

1.第二步scrollView的代理方法中计算当前滑动时,一定要判断当前的contenntSize是否等于scrollView的高度,如果等于的话证明scrollView是刚刚开始滑动,还没有过一屏的距离,此时在计算当前滑动的距离时,就不能加上scrollView的高度;

2.当滑动的比例值超出我们设定值的时候,移动要先发起网络请求,再设置正在网络请求的状态为YES,因为在网络请求中会对该状态进行判断,如果为YES的话直接就return了;

3.在网络请求的完成回调中,别忘记了将正在网络请求的状态改回为NO。

以上就是iOS开发TableView网络请求及展示预加载实现示例的详细内容,更多关于iOS TableView网络请求预加载的资料请关注我们其它相关文章!

(0)

相关推荐

  • iOS tableView右侧索引视图状态获取的方法实例

    前言 在iPhone和其他iOS的很多程序中都会看到Table View的出现,除了一般的表格资料展示之外,设置的属性资料往往也用到Table View,Table View主要分为以下两种: Plain:这是普通的列表风格  Grouped :这是分块风格. 本文介绍的是iOS tableView右侧索引视图状态获取的相关内容,下面来看正文 需求 一图胜千言! 在触摸右侧索引栏时 需要展示对应的组号名称 手指离开时消失 实现 通过Xcode查看视图层次结构 右侧索引视图的继承关系 是这样的:

  • iOS优化UITableViewCell高度计算的一些事儿

    我是前言 这篇文章是我和我们团队最近对 UITableViewCell 利用 AutoLayout 自动高度计算和 UITableView 滑动优化的一个总结. 我们也在维护一个开源的扩展,UITableView+FDTemplateLayoutCell,让高度计算这个事情变的前所未有的简单,也受到了很多星星的支持,github链接请戳我 (本地下载) 这篇总结你可以读到: UITableView高度计算和估算的机制 不同iOS系统在高度计算上的差异 iOS8 self-sizing cell

  • ios开发UITableViewCell图片加载优化详解

    目录 前言 图片自适应比例 XHWebImageAutoSize 仅加载当前屏幕的内容 预加载 前言 我们平时用UITableView用的很多,所以对列表的优化也是很关注的.很多时候,我们设置UIImageView,都是比例固定好宽高的,然后通过 scaleAspectFill 和 clipsToBounds 保持图片不变形,这样子做开发的效率是很高的,毕竟图片宽高我们都是固定好的了. 那如果产品要求图片按真正的比例展示出来呢?如果服务器有返回宽和高,那就好办了,那如果没有呢,我们应该怎么去做呢

  • iOS tableView多输入框如何获取数据

    前言 难得有点空暇的时间,写写文章,一壶小茶,惬意.扯远了,言归正传. 大家在做App开发的时候,肯定遇到过在一个列表中有多个让用户填写资料的情况,类似于这样的界面: iOS 如果一个tableView中有很多的输入框,而且cell是复用的,这个还有个提交功能 我的设计思路是这样的 1.建立一个Model对象,包含要输入的所有字段, 2.在建立一个cell,有个label和textField, 3.在初始化cell的地方,根据不同的indexRow,显示cell上不同的label,例如昵称.邮箱

  • iOS自定义UITableView实现不同系统下的左滑删除功能详解

    前言 在我们的app开发当中,经常会用到UITableView 的左滑删除的功能,通常的话效果如下 但有时候系统现有的功能并不能完全满足我们的开发需求,这样就需要我们在其现有的功能基础上自定义我们所需要的功能了.下图是在项目中自定义的按钮(只是修改了按钮的frame而已). 然后我就总结了一下根据不同的需求自定义不同的按钮. 一.系统默认左滑删除按钮 如果你对左滑删除按钮的要求不高,仅仅只是实现UITableView上cell的左滑删除功能,那在UITableView的代理方法中添加以下两种方法

  • iOS ScrollView嵌套tableView联动滚动的思路与最佳实践

    前言 随着业务的发展,页面的复杂度越来越高,嵌套滚动视图的方式也越来越受设计师们的青睐,在各大电商App十分常见.如下Demo图: 但是这样的交互官方并不推荐,而且对开发来说确是不那么友好,需要处理滚动手势的冲突,页面的多层级嵌套都给开发带来了一定程度的麻烦.接下里我聊聊我们的实现思路. 思路和过程 对应这种页面结构应该毫无疑问是最底层是一个纵向滚动的scrollView,它的页面上面放一个固定高度的header,紧接着下面一个支持横向滚动切换的容器scrollView,容器上面才是各个页面具体

  • iOS开发TableView网络请求及展示预加载实现示例

    目录 引言 传统的上拉加载更多 滑动过程中预加载 方法1(最简单.高效和最推荐): 方法2(自己计算实现,不推荐了): 下面是具体实现细节(此细节是针对上述方法2的) 总结 引言 2022.02.11更新:新增了最简单.高效和最推荐的方法. 2020.05.25更新:对总结进行了详细的补充. 传统的上拉加载更多 在iOS的开发过程中,如果用列表展示数据,此时一般的逻辑为上拉加载更多数据,配合MJRefresh就是在滑动到最底部时,触发加载更多的网络请求. 滑动过程中预加载 如果希望体验好一点,那

  • js中Image对象以及对其预加载处理示例

    不显示在文档中的 Image 对象 对于不显示在文档中的 Image 对象时用 var 语句定义的: 复制代码 代码如下: var myImage = new Image();或 var myImage = new Image(<图片地址字符串>); 然后就可以像一般 Image 对象一样对待 myImage 变量了.不过既然它不显示在文档中,以下属性:lowsrc, width, height, vspace, hspace, border 就没有什么用途了.一般这种对象只有一个用:预读图片

  • JS图片预加载插件详解

    在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念: 懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 2)区别: 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力. 服务器端区别:懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数.预加载可以说

  • android使用RxJava实现预加载

    在上一篇文章中介绍了使用非RxJava环境下,使用Handler机制SyncBarrier的特性实现预加载功能的方法. 在RxJava的环境下使用BehaviorSubject的特性来实现也是很方便的. BehaviorSubject内部会缓存消息流中最近的一个消息, 在后续有Subscriber订阅时,会直接将缓存的消息发送给Subscriber. RxPreLoader.java封装如下: import android.support.annotation.NonNull; import j

  • js中延迟加载和预加载的具体使用

    延迟加载(懒加载)和预加载是常用的 web 优化的手段.. 一.延迟加载(懒加载) 原理: 当在真正需要数据的时候,才真正执行数据加载操作. 目的: 延迟加载机制是为了避免一些无谓的性能开销而提出来的 实现延迟加载的几种方法 1. 让 js 最后加载 使用方法: 把 js 外部引入的文件放到页面底部 用途: 让 js 最后引入,从而加快页面加载速度 说明: 流览器之所以会采用同步模式,通常加载 js 文件或者放<script>标签都在结构最后面,也是因为它会阻止浏览器后续操作的原因,所以放在后

  • vue前端性能优化之预加载和懒加载示例详解

    目录 预加载 图片预加载 JS预加载 js的加载方式 preload prefetch Preload & Prefetch 的区别 不同资源加载的优先级规则 懒加载 图片懒加载 路由懒加载 组件懒加载 最后 预加载 预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源:我们使用该技术预先告知浏览器,等下某些资源可能要被使用,先把资源下载下来,不要等使用的时候再下载,可以看出这样的加载技术会增加服务器的压力,但是用户的体验会比较好,因为可以较快的看到后面的

  • js图片预加载示例

    js图片预加载简单示例 复制代码 代码如下: function loadImage(url, callback) {    if(url!='null') {        var img = new Image();        img.src = url;        if(img.complete) {            callback(img);        } else {            img.onload = function(){               

  • IOS开发 支持https请求以及ssl证书配置详解

    IOS开发 支持https请求以及ssl证书配置详解 前言: 众所周知,苹果有言,从2017年开始,将屏蔽http的资源,强推https 楼主正好近日将http转为https,给还没动手的朋友分享一二 一.证书准备 1.证书转换 在服务器人员,给你发送的crt证书后,进到证书路径,执行下面语句 // openssl x509 -in 你的证书.crt -out 你的证书.cer -outform der 这样你就可以得到cer类型的证书了.双击,导入电脑. 2.证书放入工程 1.可以直接把转换好

  • Android 开发中fragment预加载问题

    我们在做应用开发的时候,一个Activity里面可能会以viewpager(或其他容器)与多个Fragment来组合使用,而如果每个fragment都需要去加载数据,或从本地加载,或从网络加载,那么在这个activity刚创建的时候就变成需要初始化大量资源.这样的结果,我们当然不会满意.那么,能不能做到当切换到这个fragment的时候,它才去初始化呢? 答案就在Fragment里的setUserVisibleHint这个方法里.请看关于Fragment里这个方法的API文档(国内镜像地址:ht

  • iOS开发使用UITableView制作N级下拉菜单的示例

    前言 demo地址:  https://github.com/963527512/MultilayerMenu, 如果有更好的办法, 请留言 前段时间在做项目的时候, 遇到了一个N级下拉菜单的需求, 可无限层级的展开和闭合, 下面是效果图 其中每一个UITableViewCell左右两部分拥有不同的功能 左半部分我放了一个按钮, 用来控制每个选项的选中状态 右半部分控制菜单的展开和闭合 下面是我在做这个功能时的思路, 使用的是MVC 创建控制器, 并添加数据 第一步, 创建一个新的项目, 并添加

随机推荐