MJRefresh的RxSwift用法及ViewModel绑定使用说明

本文链接：https://blog.youkuaiyun.com/qq_25303213/article/details/127389775

本文介绍了如何使用RxSwift与MJRefresh库在iOS应用中实现自动下拉刷新功能。通过创建RxTarget类和RefreshTarget类，结合 MJRefresh 的组件，实现了在Controller中订阅refreshSubject以触发下拉刷新，并在ViewModel中控制刷新状态。同时，详细展示了代码实现过程及关键方法的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//
//  RxTarget.swift
//  Dealer-Ios
//
//  Created by lin.wang on 2021/7/16.
//  Copyright © 2021 Ttpai. All rights reserved.
//

import UIKit
import RxSwift
import RxCocoa
import MJRefresh
// RxTarget 是 Rxswift 源码 私有
class RxTarget: NSObject, Disposable {
    
    private var retainSelf: RxTarget?
    
    override init() {
        super.init()
        self.retainSelf = self

#if TRACE_RESOURCES
        _ = Resources.incrementTotal()
#endif

#if DEBUG
        MainScheduler.ensureRunningOnMainThread()
#endif
    }
    
    func dispose() {
#if DEBUG
        MainScheduler.ensureRunningOnMainThread()
#endif
        self.retainSelf = nil
    }

#if TRACE_RESOURCES
    deinit {
        _ = Resources.decrementTotal()
    }
#endif
}

final class RefreshTarget<Component: MJRefreshComponent>: RxTarget {
    typealias Callback = MJRefreshComponentAction
    
    var callback: Callback?
    weak var component: Component?
    let selector = #selector(RefreshTarget.eventHandler)

    init(_ component: Component, callback:@escaping Callback) {
        self.callback = callback
        self.component = component
        super.init()
        component.setRefreshingTarget(self, refreshingAction: selector)
    }
    @objc func eventHandler() {
        if let callback = self.callback {
            callback()
        }
    }
    override func dispose() {
        super.dispose()
        self.component?.refreshingBlock = nil
        self.callback = nil
    }
    
}

extension Reactive where Base: MJRefreshComponent {
    public var refresh: ControlEvent<MJRefreshComponent> {
        let source: Observable<MJRefreshComponent> = Observable.create { [weak component = self.base] observer  in
            MainScheduler.ensureExecutingOnScheduler()
            guard let component = component else {
                observer.on(.completed)
                return Disposables.create()
            }
            let observer = RefreshTarget(component) {
                observer.on(.next((component)))
            }
            return observer
        }.take(until: deallocated)
        return ControlEvent(events: source)
    }
}

/// 刷新类型枚举
public enum MJRefreshAction {
    /// 开始下拉刷新
    case beginHeaderRefresh
    /// 停止刷新
    case endHeaderRefresh
    /// 开始加载更多
    case beginFooterRefresh
    /// 停止加载更多
    case endFooterRefresh
    /// 显示无更多数据
    case endFooterRefreshWithNoMoreData
    /// 重置无更多数据
    case resetFooterNoMoreData
}

extension Reactive where Base: UIScrollView {
    public var refreshAction: Binder<MJRefreshAction> {
        return Binder(base) { (target, action) in
            switch action {
            case .beginHeaderRefresh:
                if let header = target.mj_header {
                    header.beginRefreshing()
                }
            case .endHeaderRefresh:
                if let header = target.mj_header {
                    header.endRefreshing()
                }
            case .beginFooterRefresh:
                if let footer = target.mj_footer {
                    footer.beginRefreshing()
                }
            case .endFooterRefresh:
                if let footer = target.mj_footer {
                    footer.endRefreshing()
                }
            case .endFooterRefreshWithNoMoreData:
                if let footer = target.mj_footer {
                    footer.endRefreshingWithNoMoreData()
                }
            case .resetFooterNoMoreData:
                if let footer = target.mj_footer {
                    footer.resetNoMoreData()
                }
            }
        }
    }
}

ReRefresh源码如上。

I. controller中初始化

refreshSubject 初值为beginHeaderRefresh VC绑定后会自动触发下拉刷新

注意：

 tableView的header和footer的初始化要在 refreshSubject的前面，因为refreshAction操作 header要有值，才能触发刷新功能，首次进入页面才能自动触发下拉刷新。

let header = WRefreshNormalHeader()
let footer = MJRefreshAutoNormalFooter()
//初始化下拉刷新/上拉加载
func configMJRefresh() {
    // tableView的header和footer
    self.tableView.mj_header = header
    footer.setTitle("暂无更多", for: .noMoreData)
    self.tableView.mj_footer = footer
}
初始化VM
viewModel = GuessLikeViewModel(refreshTrigger: header.rx.refresh.asObservable(), loadMoreTrigger: footer.rx.refresh.asObservable())
绑定refreshSubject
viewModel.refreshSubject
        .bind(to: tableView.rx.refreshAction)
        .disposed(by: disposeBag)

II. VM中初始化

BaseVM中增加属性
// 上下拉刷新操作
public let refreshSubject: BehaviorSubject<MJRefreshAction> = BehaviorSubject(value: .beginHeaderRefresh)

VM初始化方法
 init(refreshTrigger: Observable<MJRefreshComponent>,
         loadMoreTrigger: Observable<MJRefreshComponent>) {
        // 下拉刷新事件源
        refreshTrigger
            .subscribe(onNext: { [unowned self] _ in
                self.page = 1
                ...
            }).disposed(by: disposeBag)
        loadMoreTrigger
            .subscribe(onNext: { [unowned self] _ in
                ...
            }).disposed(by: disposeBag)
}
 
VM触发请求后，不管请求成功还是失败，首先停止header和footer的刷新 （也可不判断page）
....
do(onNext: { [unowned self] _ in
   if self.page == 1 {
      self.refreshSubject.onNext(.endHeaderRefresh)
   }
   self.refreshSubject.onNext(.endFooterRefresh)
})
...
 
 请求成功后根据是否有下一页，判断footer是否可以继续上拉加载。
 let hasNextPage = (dataLists.count == 15)
 self.refreshSubject.onNext(hasNextPage ? .endFooterRefresh : .endFooterRefreshWithNoMoreData)