UITableView InfiniteScrolling 无需在 Swift 中重新加载 TableView

Question

我正在尝试在 UITableView 中使用分页 API 实现无限滚动。因此，当到达底部单元格并重新加载整个 UITableView 时，我正在更新模型（再次调用 API 并附加结果）。我面临的问题是，当重新加载完成时，我看到屏幕上有闪烁，但我只想以平滑的方式在 tableView 中添加更多单元格，而不会出现任何闪烁。这是我写的相同内容：

class FeedViewController: UIViewController {    
    @IBOutlet private weak var tableView: UITableView!
    private var feed: Feed!

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        feed = Feed(delegate: self)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        feed.fetch(nextPage: true)
    }
}

//MARK: TableView
extension FeedViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return feed.articles.count + 1
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if indexPath.row < feed.articles.count {
            guard let cell = tableView.dequeueReusableCell(withIdentifier: "FeedTableViewCell") as? FeedTableViewCell else {
                return UITableViewCell()
            }
            cell.delegate = self
            cell.setCell(article: feed.articles[indexPath.row])
            return cell
        }
        else if feed.articles.count > 0 && !feed.hasReachedEnd {
            guard let cell = tableView.dequeueReusableCell(withIdentifier: "LoaderTableViewCell") as? LoaderTableViewCell else {
                return UITableViewCell()
            }
            cell.addLoader()
            return cell
        }
        return UITableViewCell()
    }
}

extension FeedViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        if indexPath.row == feed.articles.count && !feed.hasReachedEnd {
            feed.fetch(nextPage: true)
        }
    }
}

//MARK: API Management
extension FeedViewController: FeedProtocol {
    func requestCompletedSuccessfully() {
        DispatchQueue.main.async { [weak self] in
            self?.loader.stopAnimating()
            self?.tableView.reloadData()
        }
    }

    func requestFailedWith(error: NSError?) {}
}

在这里您可能会看到，一旦获取请求完成，使用委托我将在那里重新加载整个 tableView，但如果可能的话，我需要一些更好的解决方案来避免这种闪烁。 请让我知道是否需要其他内容。谢谢

Answer 1

你应该做的是调用tableView.reloadRows 而不是tableView.reloadData。但为了做到这一点，您需要知道当 requestCompletedSuccessfully 执行时您的提要中有多少新元素。比如：

let indexPaths = Array(previousFeedCount..<newFeedCount)
    .map { IndexPath(row: $0, section: 0) }
tableView.reloadRows(at: indexPaths, with: .automatic)

Answer 2

只需使用scrollView Delegate，tableview默认继承自UIScrollView，并将delegate设置为self。

extension FeedViewController: UIScrollViewDelegate {
       func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {

        if self.tableView.contentOffset.y <= -10  {

            // table view reached top place your pull to refresh call here
        } else if ((tableView.contentOffset.y + tableView.frame.size.height) >= tableView.contentSize.height) {
            //table view reached last record, fetch next records here
            // tableview usually flickers if content to be reloaded is out of screen bounds. There is one hack to avoid that, add replace these three lines with tableView.reloadData() line
            UIView.setAnimationsEnabled(false)
            tableView.reloadData()
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                UIView.setAnimationsEnabled(true)
            }
       }
    }
}