tableView 中的下拉刷新和上拉加载更多：全面解析

2023-11-10 12:08:19

iOS tableView 中的下拉刷新和上拉加载更多：全面解析

概述

TableView 作为 iOS 中最常用的 UI 组件之一，因其灵活性和可定制性而备受青睐。然而，在实际项目中，为了提升用户体验，往往需要为其添加下拉刷新和上拉加载更多等交互功能。本文将从基础概念入手，详细解析如何实现 tableView 中的下拉刷新和上拉加载更多，并提供代码示例，助力开发者轻松掌握这项核心技术。

基础概念

下拉刷新： 当用户从 tableView 顶部向下滑动时触发的动作，用于刷新数据并重新加载 tableView。
上拉加载更多： 当用户滑动到 tableView 底部时触发的动作，用于加载更多数据并追加到 tableView 中。
UIScrollView： tableView 的父类，提供滚动、手势识别等功能。
UIRefreshControl： 用于实现下拉刷新的控件，可提供旋转指示器和文本提示。

实现下拉刷新

添加 UIRefreshControl：
- 创建一个 UIRefreshControl 实例并将其添加到 tableView 的 refreshControl 属性中。
设置下拉刷新事件：
- 实现 UIScrollViewDelegate 中的 scrollViewDidEndDragging:willDecelerate 方法，并在用户结束拖动、视图停止减速时判断是否触发下拉刷新。
触发刷新动作：
- 如果触发下拉刷新，调用 beginRefreshing 方法开始刷新动画并执行数据加载操作。
停止刷新动画：
- 数据加载完成后，调用 endRefreshing 方法停止刷新动画并更新 tableView 数据。

实现上拉加载更多

监测滚动位置：
- 实现 UIScrollViewDelegate 中的 scrollViewDidScroll 方法，实时监测 tableView 的滚动位置。
判断是否触发上拉加载更多：
- 当滚动到 tableView 底部时，判断是否还有更多数据需要加载。
触发加载更多动作：
- 如果触发上拉加载更多，执行数据加载操作。
更新 tableView：
- 数据加载完成后，更新 tableView 数据并插入到现有数据末尾。

代码示例

class ViewController: UIViewController {
    var tableView: UITableView!
    var refreshControl: UIRefreshControl!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 创建 tableView
        tableView = UITableView(frame: view.bounds)
        tableView.dataSource = self
        tableView.delegate = self
        view.addSubview(tableView)

        // 创建 refreshControl
        refreshControl = UIRefreshControl()
        refreshControl.addTarget(self, action: #selector(handleRefresh), for: .valueChanged)
        tableView.refreshControl = refreshControl
    }

    // 处理下拉刷新
    @objc func handleRefresh() {
        // 模拟数据加载
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            self.tableView.reloadData()
            self.refreshControl.endRefreshing()
        }
    }

    // 处理上拉加载更多
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView.contentOffset.y >= (scrollView.contentSize.height - scrollView.frame.size.height) {
            // 模拟数据加载
            DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                // 更新 tableView 数据
                self.tableView.reloadData()
            }
        }
    }
}