分页加载的列表实现方案

分页列表是开发过程中最常见的的需求，虽然简单，但是还是有一些点值得总结。之前也没有过多思考过这个需求，每次都是想到那写到哪，结果就是经常会犯之前翻过的错误，所以决定总结出一个模版出来。

值得注意的点

• 两个动作：下拉刷新，上拉加载更多。
  下拉刷新需要注意，刷新前不能清空数据，而是要等刷新的数据返回之后去替换原来的就数据。否则当刷新失败，刷新前的数据又被清空，就会导致页面没有数据。
  上拉加载更多要注意当没有更多数据时，我们应该把刷新状态设置为没有更多数据，可以避免无效刷新。
• 刷新过程
  控制器需要感知到刷新状态（闲置/刷新中/刷新结束）的变化，以展示合适的UI。

模版

模版.png

• 控制器/视图
  业务的载体，给用户提供服务。

    lazy var manager = ListManager()
    
    lazy var refreshHeader: MJRefreshNormalHeader = {
        let header = MJRefreshNormalHeader { [weak self] in
            self?.manager.reload()
        }
        return header
    }()
    
    lazy var refreshFooter: MJRefreshAutoStateFooter = {
        let footer = MJRefreshAutoStateFooter { [weak self] in
            self?.manager.loadNextPage()
        }
        return footer
    }()
    
   private func handleState(_ state: ListManager.State) {
        switch state {
        case .idle:
            refreshHeader.endRefreshing()
            if manager.isExhausted {
                refreshFooter.endRefreshingWithNoMoreData()
            } else {
                refreshFooter.endRefreshing()
            }
            
        case .loading:
            break
            
        case .loaded(let error):
            tableView.reloadData()
            print(error?.localizedDescription ?? "")
        }
    }

• Manager
  封装核心数据逻辑管理的类，是业务的骨架，给控制器提供服务。
  这里有下拉刷新和下拉加载两个动作可以引起页面变化，但是如果我们从数据层面来看的话，其实是这两个动作引起了列表数据变化，数据变化引起了页面变化。所以其实控制器只关心数据和获取数据的进度状态。所以我引入了一个Manager去处理这中间的转换。Manager提供reload、loadNextPage接口，然后输出列表数据和刷新状态。

  
  Controller & Manager

class ListManager {
    
    /// 刷新状态
    enum State {
        /// 闲置
        case idle
        
        /// 加载中
        case loading
        
        /// 加载结束（error为nil时表示刷新成功）
        case loaded(Error?)
    }
    
    /// 是否还有数据
    var isExhausted: Bool = false
    
    /// 列表数据
    private(set) var list = [ListModel]()
    
    /// 状态
    private(set) var state: State = .idle {
        didSet {
            statehandler?(state)
        }
    }
    
    /// 状态闭包（用于通知控制器获取数据的状态）
    var statehandler: ((_ state: State) -> Void)?
    
    /// 下拉刷新调用的方法
    func reload() {
        loadData(offset: 0) { [weak self] items in
            self?.list = items
        }
    }
    
    /// 上拉加载下一页调用的方法
    func loadNextPage() {
        loadData(offset: list.count) { [weak self] items in
            self?.list.append(contentsOf: items)
        }
    }
    
    /// 获取数据，处理状态，处理isExhausted
    private func loadData(offset: Int, onSuccess: ((_ list: [ListModel]) -> Void)?) {
        state = .loading
        ListSourceService.loadListData(offset: offset, limit: ListSourceService.limit) { [weak self] list in
            guard let self = self else {
                return
            }
            onSuccess?(list)
            self.isExhausted = list.count < ListSourceService.limit
            self.state = .loaded(nil)
            self.state = .idle
        } onError: { [weak self] error in
            self?.state = .loaded(error)
            self?.state = .idle
        }
    }
}

• Service
  数据来源，给Manger提供服务。

struct ListSourceService {
    /// 每页数量
    static var limit = 10
    
    static let totolCount = 55
    
    /// 获取数据方法（这里用延时模拟获取数据）
    static func loadListData(offset: Int, limit: Int, onSuccess: @escaping ((_ list: [ListModel]) -> Void), onError: ((_ error: Error) -> Void)) {
        DispatchQueue.main.asyncAfter(deadline: .now()+0.5) {
            var items = [ListModel]()
            let count = Self.totolCount - offset
            guard count > 0 else {
                onSuccess(items)
                return
            }
            let remain = min(Self.limit, count)
            for i in 0..<remain {
                let model = ListModel(name: "第\(i+offset+1)条数据")
                items.append(model)
            }
            onSuccess(items)
        }
    }
}

总结

这样做可以达到数据逻辑和UI分离、数据驱动UI的效果。数据逻辑和UI分离使得对其任一部分的修改都不会影响另一部分；数据驱动UI使得代码可读性、维护性会更高。