Swiftui分页列表实现

最新推荐文章于 2025-10-04 06:45:22 发布

原创最新推荐文章于 2025-10-04 06:45:22 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#swift #ios

IOS SwiftUI学习专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在 SwiftUI 中创建一个分页列表，详细讲解了相关步骤和关键代码，帮助iOS开发者实现高效的用户界面滚动体验。

import SwiftUI

struct Members: View {
    @ObservedObject var memberData = MemberData()
    
    var body: some View {
        NavigationView {
            List {
                // 1. Members
                ForEach(memberData.members) { member in
                    MembersListCell(member: member)
                }
                
                // 2. Activity Indicator. Last element of list.
                // Show activity spinner if backend has more data.
                // Its onAppear method is used to load new members. Pagination done.
                if memberData.membersListFull == false {
                    ActivityIndicator()
                    .onAppear {
                        memberData.fetchMembers()
                    }
                }
            }
            .navigationBarTitle("Members")
        }
    }
}

import Foundation
import Combine

class MemberData: ObservableObject {
    @Published var members = [Member]()
    
    // Tells if all records have been loaded. (Used to hide/show activity spinner)
    var membersListFull = false
    // Tracks last page loaded. Used to load next page (current + 1)
    var currentPage = 0
    // Limit of records per page. (Only if backend supports, it usually does)
    let perPage = 20
    
    let url = URL(string: "https://testURL.com?page=\(currentPage+1)&perPage=\(perPage)")!
    private var cancellable: AnyCancellable?
    
    func fetchMembers() {
        cancellable = URLSession.shared.dataTaskPublisher(for: url)
            .tryMap { $0.data }
            .decode(type: [Member].self, decoder: JSONDecoder())
            .receive(on: RunLoop.main)
            .catch { _ in Just(self.members) }
            .sink { [weak self] in
                self?.currentPage += 1
                self?.members.append(contentsOf: $0)
                // If count of data received is less than perPage value then it is last page. 
                if $0.count < perPage {
                    self?.membersListFull = true
                }
        }
    }
}