美文网首页
分页加载的列表实现方案

分页加载的列表实现方案

作者: silencemajority | 来源:发表于2021-10-17 22:50 被阅读0次

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

    值得注意的点

    • 两个动作:下拉刷新,上拉加载更多。
      下拉刷新需要注意,刷新前不能清空数据,而是要等刷新的数据返回之后去替换原来的就数据。否则当刷新失败,刷新前的数据又被清空,就会导致页面没有数据。
      上拉加载更多要注意当没有更多数据时,我们应该把刷新状态设置为没有更多数据,可以避免无效刷新。
    • 刷新过程
      控制器需要感知到刷新状态(闲置/刷新中/刷新结束)的变化,以展示合适的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使得代码可读性、维护性会更高。

    相关文章

      网友评论

          本文标题:分页加载的列表实现方案

          本文链接:https://www.haomeiwen.com/subject/bzgwoltx.html