分页列表是开发过程中最常见的的需求，虽然简单，但是还是有一些点值得总结。之前也没有过多思考过这个需求，每次都是想到那写到哪，结果就是经常会犯之前翻过的错误，所以决定总结出一个模版出来。
值得注意的点
- 两个动作：下拉刷新，上拉加载更多。
下拉刷新需要注意，刷新前不能清空数据，而是要等刷新的数据返回之后去替换原来的就数据。否则当刷新失败，刷新前的数据又被清空，就会导致页面没有数据。
上拉加载更多要注意当没有更多数据时，我们应该把刷新状态设置为没有更多数据，可以避免无效刷新。 - 刷新过程
控制器需要感知到刷新状态（闲置/刷新中/刷新结束）的变化，以展示合适的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使得代码可读性、维护性会更高。
