分页和无限滚动功能

Question

我想写一个分页函数，让我可以无限滚动，但我发现这很困难 下面是我的 API 调用的代码：

class CoinDataService: ObservableObject {

@Published var  allCoins: [CoinModel] = []
@Published var isLoading: Bool = false

var coinSubcription: AnyCancellable?

var coinListFull = false

var currentpage = 0

let perpage = 200

var canLoadMorePages = true

init() {
    getCoins()
}

public func getCoins() {
    
    guard !isLoading && canLoadMorePages else {
      return
    }
    
   isLoading = true
    guard let url = URL(string: "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=\(perpage)&page=\(currentpage)&sparkline=true&price_change_percentage=24h")
    else { return }
    
    coinSubcription = NetworkingManager.download(url: url)
        .decode(type: [CoinModel].self, decoder: JSONDecoder())
        .receive(on: DispatchQueue.main)
        .sink(receiveCompletion: NetworkingManager.handleCompletion, receiveValue: { [weak self] (returnedCoins) in
            self?.allCoins = returnedCoins
            self?.coinSubcription?.cancel()
            if returnedCoins.count < self!.perpage {
                self?.coinListFull = true
            }
        })
    isLoading = false
}

我需要的只是一个可以让我增加应用程序页面的功能

Answer 1

尝试以下希望它有效。

要实现分页无限滚动，您可以修改现有代码以在用户到达当前列表末尾时加载更多硬币。这是 CoinDataService 类的修改版本：

import Combine

class CoinDataService: ObservableObject {
    @Published var allCoins: [CoinModel] = []
    @Published var isLoading: Bool = false

    var coinSubcription: AnyCancellable?

    var coinListFull = false
    var currentpage = 1
    let perpage = 200
   var canLoadMorePages = true

init() {
    getCoins()
}

public func getCoins() {
    guard !isLoading && canLoadMorePages else {
        return
    }

    isLoading = true
    guard let url = URL(string: "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=\(perpage)&page=\(currentpage)&sparkline=true&price_change_percentage=24h")
    else { return }

    coinSubcription = NetworkingManager.download(url: url)
        .decode(type: [CoinModel].self, decoder: JSONDecoder())
        .receive(on: DispatchQueue.main)
        .sink(receiveCompletion: { [weak self] completion in
            NetworkingManager.handleCompletion(completion)
            self?.isLoading = false
        }, receiveValue: { [weak self] returnedCoins in
            self?.allCoins.append(contentsOf: returnedCoins)
            if returnedCoins.count < self!.perpage {
                self?.coinListFull = true
            }
            self?.currentpage += 1
        })
    }
}

在此修改中，我进行了以下更改：

每次您收到新硬币时，
1. 都会增加当前页面。
2. 将新硬币添加到现有的 allCoins 数组中，而不是 更换它。
3. 在完成块中将 isLoading 设置为 false 以指示结束 加载过程。

现在，当您调用 getCoins() 时，它将获取下一页的硬币并将它们附加到现有列表中。您可以将其与 SwiftUI List 或 ScrollView 结合使用来实现无限滚动。确保在 UI 中正确处理加载状态。