iOS开发新手求助：Collection View分页加载更多文章失败

嘿，作为iOS开发摸爬滚打几年的老鸟，我来帮你搞定Collection View的分页问题！你说的上拉加载没反应，大概率是没做好分页参数传递、滚动触发逻辑或者数据更新的细节，下面一步步给你讲清楚～

1. 先定义分页核心参数 #

首先在你的ViewController（或者专门的ViewModel）里加几个关键变量，用来控制分页逻辑：

// 分页核心参数
private var currentPage = 1 // 当前请求的页码，初始为1
private let perPage = 10 // 每页加载的数量，根据你的API要求调整
private var isLoading = false // 标记是否正在加载，防止重复请求
private var hasMoreData = true // 标记是否还有更多数据可加载
private var articles: [Artikel] = [] // 存储所有文章数据

2. 完善API请求的分页逻辑 #

修改你Artikel.swift里的请求方法，加上分页参数（page和per_page），并且处理是否还有更多数据的判断：

import Foundation
import Alamofire
import SwiftyJSON
import os.log

struct Artikel: Codable { // 建议遵守Codable，比SwiftyJSON更规范，当然你也可以继续用SwiftyJSON
    // 你的Artikel属性，比如id、title、content等
    let id: Int
    let title: String
    // ...其他属性
    
    // 如果用SwiftyJSON初始化
    init?(json: JSON) {
        guard let id = json["id"].int, let title = json["title"].string else {
            os_log("Artikel解析失败", log: OSLog.default, type: .error)
            return nil
        }
        self.id = id
        self.title = title
        // ...其他属性赋值
    }
}

// 建议把API请求封装成单独的服务类，或者放在ViewController里
extension YourViewController {
    func fetchArticles(page: Int, completion: @escaping ([Artikel]?, Error?) -> Void) {
        let apiUrl = "你的API接口地址"
        // 根据你的API截图传递分页参数，比如page、per_page等
        let parameters: [String: Any] = [
            "page": page,
            "per_page": perPage
        ]
        
        AF.request(apiUrl, method: .get, parameters: parameters).responseJSON { response in
            switch response.result {
            case .success(let value):
                let json = JSON(value)
                // 解析API返回的文章数组，这里要匹配你的API返回结构（比如json["data"]）
                let newArticles = json["data"].arrayValue.compactMap { Artikel(json: $0) }
                // 判断是否还有更多数据：如果返回的数量小于每页数量，说明没有更多了
                self.hasMoreData = newArticles.count == self.perPage
                completion(newArticles, nil)
            case .failure(let error):
                os_log("API请求失败: %@", log: OSLog.default, type: .error, error.localizedDescription)
                completion(nil, error)
            }
        }
    }
}

3. 监听Collection View滚动，触发加载更多 #

让你的ViewController遵守UIScrollViewDelegate，实现滚动监听方法，判断用户是否滑到接近底部，然后触发加载：

extension YourViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // 三个判断条件：不在加载中、还有更多数据、滑到接近底部
        guard !isLoading, hasMoreData else { return }
        
        // 计算滚动位置：当距离底部200pt时触发加载（可以根据需求调整）
        let offsetY = scrollView.contentOffset.y
        let contentHeight = scrollView.contentSize.height
        let frameHeight = scrollView.frame.size.height
        
        if offsetY > contentHeight - frameHeight - 200 {
            loadMoreArticles()
        }
    }
    
    private func loadMoreArticles() {
        isLoading = true
        // 可选：显示加载脚视图，提升用户体验
        collectionView.reloadSections(IndexSet(integer: 1))
        
        // 请求下一页数据
        currentPage += 1
        fetchArticles(page: currentPage) { [weak self] newArticles, error in
            guard let self = self else { return }
            self.isLoading = false
            
            if let newArticles = newArticles, !newArticles.isEmpty {
                // 重点：追加新数据，不要清空原有数据！很多新手这里出错
                self.articles.append(contentsOf: newArticles)
                // 刷新Collection View
                self.collectionView.reloadData()
            }
            
            // 隐藏加载脚视图
            self.collectionView.reloadSections(IndexSet(integer: 1))
            
            // 如果请求失败，回退页码，防止下次请求错误的页码
            if let error = error {
                os_log("加载更多失败: %@", log: OSLog.default, type: .error, error.localizedDescription)
                self.currentPage -= 1
            }
        }
    }
}

4. 加载状态的UI处理（可选但推荐） #

添加一个加载脚视图，让用户知道正在加载中：

// 先注册加载脚视图（在viewDidLoad里）
collectionView.register(LoadingCell.self, forCellWithReuseIdentifier: "LoadingCell")

// 完善Collection View数据源方法
extension YourViewController: UICollectionViewDataSource {
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        // 有更多数据时显示脚视图的section，否则只显示文章section
        return hasMoreData ? 2 : 1
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if section == 0 {
            return articles.count
        } else {
            // 加载中显示1个脚视图，否则不显示
            return isLoading ? 1 : 0
        }
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if indexPath.section == 0 {
            // 返回你的文章Cell
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ArticleCell", for: indexPath) as! ArticleCell
            let article = articles[indexPath.item]
            // 配置Cell的内容，比如cell.titleLabel.text = article.title
            return cell
        } else {
            // 返回加载脚视图
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "LoadingCell", for: indexPath) as! LoadingCell
            cell.activityIndicator.startAnimating()
            return cell
        }
    }
}

// 自定义加载脚视图
class LoadingCell: UICollectionViewCell {
    let activityIndicator = UIActivityIndicatorView(style: .medium)
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        addSubview(activityIndicator)
        activityIndicator.center = center
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

5. 避坑指南（重点！） #

• 不要清空原有数据：加载更多是append(contentsOf:)，不是articles = newArticles，否则之前的内容会被覆盖
• 必须加isLoading标记：防止用户快速上拉触发多次重复请求，导致数据混乱
• 判断hasMoreData：当API返回的数据不足一页时，要停止触发加载更多，避免无效请求
• 用weak self：在闭包里用[weak self]，防止循环引用导致内存泄漏
• 失败后回退页码：如果请求失败，把currentPage减1，不然下次请求会跳过一页

内容的提问来源于stack exchange，提问作者Ash