SwiftUI如何高效加载分页API数据并解决多媒体渲染问题

问题1：分页逻辑错误（跳页、33条共4页场景适配失效） #

根因 #

绝大多数跳页问题来自两个错误写法：一是页码初始值设置错误、在请求发起前就提前更新页码；二是没有加加载状态锁，快速滚动时重复触发请求导致页码异常累加。

修复实现 #

分页核心状态全部收敛在ViewModel层管理，不要在View层持有分页参数：

// ViewModel 分页核心状态定义
private var currentPage: Int = 1 // 后端分页默认从1开始，不要初始化为0
private let pageSize: Int = 10
private var totalCount: Int = 0
@Published var isLoading: Bool = false // 加载锁，防止重复请求
@Published var hasMoreData: Bool = true // 是否存在下一页
@Published var products: [Product] = []

正确的边界判断与页码更新逻辑：

// 判断是否需要触发加载更多
func shouldLoadMore(currentItem: Product) -> Bool {
    guard !isLoading, hasMoreData, let lastItem = products.last else { return false }
    return currentItem.id == lastItem.id
}

// 加载更多逻辑
func loadMoreData() {
    guard !isLoading, hasMoreData else { return }
    isLoading = true
    dataService.fetchProducts(page: currentPage, pageSize: pageSize)
        .sink(
            receiveCompletion: { [weak self] completion in
                if case .failure = completion {
                    self?.isLoading = false
                    // 这里可以加错误提示逻辑
                }
            },
            receiveValue: { [weak self] newItems, total in
                guard let self = self else { return }
                self.totalCount = total
                self.products.append(contentsOf: newItems)
                // 适配33条共4页的场景：已加载条数 < 总条数 即存在下一页
                self.hasMoreData = self.products.count < self.totalCount
                // *核心修复：请求成功后才更新页码，不要在发请求前加页码*
                self.currentPage += 1
                self.isLoading = false
            }
        )
        .store(in: &cancellables)
}

问题2：分页加载卡顿、加载状态管理混乱 #

根因 #

卡顿来自网络请求、JSON解析、数据处理等耗时操作全部放在主线程执行，阻塞UI渲染；加载状态如果放在View层用@State管理，会出现多视图状态不一致、触发逻辑混乱的问题。

修复实现 #

1. 所有耗时操作切换到后台队列，仅UI更新回到主线程：

// ProductDataService 网络请求实现
func fetchProducts(page: Int, pageSize: Int) -> AnyPublisher<(items: [Product], total: Int), Error> {
    guard let url = URL(string: "your-api-endpoint?page=\(page)&size=\(pageSize)") else {
        return Fail(error: URLError(.badURL)).eraseToAnyPublisher()
    }
    return URLSession.shared.dataTaskPublisher(for: url)
        .subscribe(on: DispatchQueue.global(qos: .userInitiated)) // 请求、解析全在后台执行
        .map(\.data)
        .decode(type: ProductListResponse.self, decoder: JSONDecoder())
        .map { ($0.items, $0.total) }
        .receive(on: DispatchQueue.main) // 仅最终回调切主线程更新UI
        .eraseToAnyPublisher()
}

2. 加载状态统一由ViewModel的@Published var isLoading管理，View层直接监听展示进度视图即可：

// 列表底部加载进度实现
List {
    ForEach(products) { product in
        ProductRow(product: product)
            .onAppear {
                if viewModel.shouldLoadMore(currentItem: product) {
                    viewModel.loadMoreData()
                }
            }
    }
    if viewModel.isLoading {
        ProgressView()
            .frame(maxWidth: .infinity, alignment: .center)
            .padding(.vertical, 16)
    }
}

优化建议：替换ScrollViewReader的阈值触发逻辑，用最后一个元素onAppear触发加载的性能更高、重复触发概率更低 #

问题3：多媒体视图错位（图片加载前显示视频播放器空白帧） #

根因 #

SwiftUI列表复用机制下，没有给不同类型的媒体视图设置唯一身份标识，导致视频播放器实例残留，复用到图片单元格时显示空白帧；同时没有为图片加载流程设置独立占位。

修复实现 #

为不同类型媒体视图添加唯一ID强制区分复用身份，为图片加载全流程设置独立占位：

struct MediaView: View {
    let media: ProductMedia
    var body: some View {
        Group {
            switch media.type {
            case .image:
                AsyncImage(url: media.url) { phase in
                    switch phase {
                    case .empty:
                        // 图片加载占位
                        Rectangle()
                            .fill(Color.gray.opacity(0.15))
                            .overlay(ProgressView())
                    case .success(let image):
                        image.resizable().scaledToFit()
                    case .failure:
                        Image(systemName: "photo.fill")
                            .foregroundColor(.gray)
                    @unknown default: EmptyView()
                    }
                }
                .id("image-\(media.id)") // 唯一标识，避免和视频视图复用
            case .video:
                VideoPlayer(player: AVPlayer(url: media.url))
                    .id("video-\(media.id)") // 视频视图独立标识
                    .scaledToFit()
            }
        }
        .clipped()
    }
}

额外优化：视频播放器采用懒加载初始化，单元格滑出屏幕时自动暂停播放，减少内存占用避免滚动卡顿 #

生产级GET分页加载最优实践 #

• 状态收敛：所有分页参数、加载状态、数据列表全量放在ViewModel层管理，View层只做事件触发和UI展示，不要持有任何分页相关的局部状态
• 防抖处理：为加载更多触发逻辑加Combine的debounce(for: .milliseconds(300), scheduler: DispatchQueue.main)，避免快速滚动时重复触发请求
• 失败处理：请求失败时不要更新页码，在列表底部展示重试按钮，由用户手动触发重试，不要做无限制自动重试
• 刷新适配：下拉刷新时重置currentPage = 1、清空已有列表、设置hasMoreData = true，再重新请求第一页数据
• 预加载优化：将触发加载的阈值从最后一个元素调整为倒数第5个元素，提前加载下一页数据，消除用户感知的加载等待

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