SwiftUI 无需第三方库实现列表滚动到底部追加数据的无限滚动方案

现有代码问题分析 #

现有代码给所有列表项绑定了onAppear回调，每一个列表项渲染时都会触发数据追加逻辑，因此会出现持续触发加载的异常。

核心实现逻辑 #

只需要在列表最后一项渲染时触发加载逻辑，同时添加加载状态锁避免重复请求即可，无需计算滚动偏移量。

具体实现步骤 #

• 第一步：给数据源对应的ViewModel添加2个状态属性

// 标记是否正在加载更多数据，避免重复请求
var isLoadingMore: Bool = false
// 标记是否还有更多数据可加载，后端返回无数据时设为false即可
var hasMoreData: Bool = true

注意：你的列表数据模型需要遵守Identifiable协议，或在ForEach中指定唯一标识字段，用于判断是否为最后一项

• 第二步：修改列表项的onAppear逻辑

ForEach(homeContent.mainContent) { data in
    HomeContentItem(name: data.name ?? "", image: data.image ?? "", released: data.released ?? "")
        .padding(.horizontal)
        .onAppear {
            // 仅满足所有条件时才触发加载
            guard let lastItem = homeContent.mainContent.last,
                  lastItem.id == data.id,
                  !homeContent.isLoadingMore,
                  homeContent.hasMoreData else {
                return
            }
            homeContent.appendData()
        }
}

如果希望提前触发加载（不用完全滚动到底部才加载，提升使用体验），可以把判断条件改为当前项是倒数第N项，示例为倒数第3项触发：

guard homeContent.mainContent.count >= 3 else { return }
let triggerIndex = homeContent.mainContent.count - 3
let currentIndex = homeContent.mainContent.firstIndex { $0.id == data.id }
if currentIndex == triggerIndex, !homeContent.isLoadingMore, homeContent.hasMoreData {
    homeContent.appendData()
}

• 第三步：修改appendData的实现，增加状态切换逻辑

func appendData() {
    isLoadingMore = true
    // 你的网络请求/本地数据追加逻辑
    fetchNextPageRequest { [weak self] newList, noMoreData in
        guard let self = self else { return }
        self.mainContent.append(contentsOf: newList)
        self.hasMoreData = !noMoreData
        self.isLoadingMore = false
    }
}

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