社区首页 >专栏 >实现 iOS 无感知上拉加载更多

实现 iOS 无感知上拉加载更多

网罗开发

发布于 2021-08-13 08:23:26

2.5K00

代码可运行

文章被收录于专栏：网罗开发网罗开发

运行总次数：0

代码可运行

什么是无感知上拉加载更多

什么是无感知，这个这样理解：在网络情况正常的情况下，用户对列表进行连续的上拉时，该列表可以无卡顿不停出现新的数据。

如果要体验话，Web 端很多已经做到了，比如掘金的首页，还有比如掘金 iOS 的 App，列表都是无感知上拉加载更多。

说来惭愧，写了这久的代码，还真的没有认真思考这个功能怎么实现。

如何实现

我在看见这位网友留言的时候，就开始思考了。

在我看来，有下面几个着手点：

列表滑动时候的是如何知道具体滑动的位置以触发接口请求，添加更多数据？
从 UIScrollView 的代理回调中去找和 scrollView 的位置（contentOffset）大小（contentSize）关系密切的回调。
网络上有没有比较成熟的思路？

顺着这条线，我先跑去看了 UIScrollViewDelegate 的源码：

public protocol UIScrollViewDelegate : NSObjectProtocol {

    
    @available(iOS 2.0, *)
    optional func scrollViewDidScroll(_ scrollView: UIScrollView) // any offset changes

    @available(iOS 3.2, *)
    optional func scrollViewDidZoom(_ scrollView: UIScrollView) // any zoom scale changes

    .
    .
    .
    .
    .
    .
    /// 代码很多，这里就不放上来，给大家压力了。
}

直接上结论吧：看了一圈，反正没有和 contentSize 或者位置相关的回调代理。scrollViewDidScroll这个回调里面虽然可以回参 scrollView，但是对于我们需要的信息还不够具体。

思考：既然 UIScrollViewDelegate 的代理没有现成的代理回调，自己使用 KVO 去监听试试？

网上的思路（一）

就在我思考的同时，我也在网络上需求实现这个功能的答案，让后看到这样一个思路：

实现方法很简单，需要用到 tableView 的一个代理方法，就可轻松实现。- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath 就是这个方法，自定义显示 cell。这个方法不太常用。但是这个方法可在每个 cell 将要第一次出现的时候触发。然后我们可设置当前页面第几个 cell 将要出现时，触发请求加载更多数据。

我看了之后，心想着，多写一个 TableView 的代理，总比写 KVO 的代码少，先试试再说，于是代码撸起：

extension SwiftCoinRankListController: UITableViewDelegate {
    
    func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        let row = indexPath.row
        let distance = dataSource.count - 25
        print("row: \(row), distance:\(distance)  ")
        if row == distance {
            loadMore()
        }
    }
}

本代码可以在开源项目中的 SwiftCoinRankListController.swift 文件查看具体的逻辑，其主要就是通过 cell 显示的个数去提前请求加载数据，然后我们看看效果：

Gif可能看起来还好，我说我调试的感受：

虽然做到了上拉无感知，但是当手滑的速度比较快的时候，到底了新的数据没有回来，就会在底部等一段时间。

功能达到了，但是感受却不理想，果然还是监听的细腻程度不够。

网上的思路（二）

然后在继续的搜索中，我看到了另外一个方案：

很多时候我们上拉刷新需要提前加载新数据，这时候利用 MJRefreshAutoFooter 的属性 triggerAutomaticallyRefreshPercent 就可以实现，该属性 triggerAutomaticallyRefreshPercent 默认值为 1，然后改成 0 的话划到底部就会自动刷新，改成 -1 的话，在快划到底部 44px 的时候就会自动刷新。

MJRefresh？使用 MJRefreshAutoFooter，这个简单，我直接把基类的 footer 给替换掉就可以了，本代码可以在开源项目中的 BaseTableViewController.swift 文件查看：

/// 设置尾部刷新控件,更新为无感知加载更多
let footer = MJRefreshAutoFooter()
footer.triggerAutomaticallyRefreshPercent = -1
tableView.mj_footer = footer

再来看看效果：

直接说感受：

代码改动性少，编写简单，达到预期效果，爽歪歪。比方案一更丝滑，体验好。

到此，功能就实现，难道就完了？

当然，不会，我们去看看源码吧。

MJRefresh代码的追根朔源

首先我们看看 MJRefreshAutoFooter.h 文件：

这里有个专门的属性 triggerAutomaticallyRefreshPercent 去做自动刷新，那么我们去 MJRefreshAutoFooter.m 中去看看吧：

注意看喔，这个 .m 文件有一个 - (void)scrollViewContentOffsetDidChange:(NSDictionary *)change 方法，并且还调用了 super，从这个方法名中我们可以明显的得到当 scrollView 的 contentOffset变化的时候进行回调的监听。，我们顺藤摸瓜，看看 super 是什么，会不会有新的发现：