SwiftUI中如何在ScrollView内实现列表分页加载？

原来用List时，ForEach的onAppear会在列表元素滚动到可视区域时触发，所以能实现滚动到底部自动加载。但换成ScrollView后，直接给ForEach加onAppear只会在整个ForEach首次出现时触发一次，不会在滚动到列表末尾时重复触发，这就是分页失效的核心原因。

下面是两种可行的修复方案：

方案一：给最后一个帖子绑定加载触发逻辑 #

修改代码，在ForEach内部判断当前帖子是否为列表最后一项，仅对最后一项添加onAppear触发加载：

ScrollView {
    Text("Home")
    ForEach(postList, id: \.uuid) { post in
        SinglePostView(post: post)
            .listRowInsets(EdgeInsets())
            .listRowSeparator(.hidden)
            .id(post)
            // 仅在最后一个帖子进入可视区域时触发加载
            .onAppear {
                guard post == postList.last, !isLoading, !isLastDoc else {
                    return
                }
                isLoading = true
                fetchAllPosts()
            }
    }
    // 可选：添加加载状态提示
    if isLoading {
        ProgressView("加载中...")
            .padding()
    }
}

方案二：添加独立的加载触发视图 #

在帖子列表末尾新增一个占位视图，当这个视图滚动到可视区域时触发分页加载，逻辑更清晰：

ScrollView {
    Text("Home")
    ForEach(postList, id: \.uuid) { post in
        SinglePostView(post: post)
            .listRowInsets(EdgeInsets())
            .listRowSeparator(.hidden)
            .id(post)
    }
    // 加载触发占位视图，滚动到此处时触发分页
    if !isLastDoc {
        Color.clear
            .frame(height: 1)
            .onAppear {
                guard !isLoading else { return }
                isLoading = true
                fetchAllPosts()
            }
    }
    // 加载状态提示
    if isLoading {
        ProgressView("加载中...")
            .padding()
    }
}

关键注意点 #

• 务必在fetchAllPosts请求完成后，将isLoading设为false，避免重复触发加载
• isLastDoc要准确标记是否已加载完全部数据，防止发起无效请求

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