如何对非服务端拉取的本地静态表格数据实现分页？

Hey there! I get that most pagination guides focus on server-side fetching, but since all your data is static local arrays, we can keep this nice and simple. Let's walk through a solid solution tailored for your 3-tab setup with different data sizes.

The core idea here is to slice your original static array based on current page number and page size, then feed that sliced subarray to your corresponding TableView. Here's how to implement this step by step:

1. Maintain Independent Pagination State for Each Tab #

Since each Tab's TableView operates independently, we need to track pagination state (current page, page size, total items) separately for each tab:

// A struct to hold pagination state for a single tab
struct PaginationState {
    var currentPage: Int = 1
    let pageSize: Int = 20 // Adjust this to your preferred items per page
    let totalItems: Int
}

// Initialize state for each tab using your existing array counts
var tabOneState = PaginationState(totalItems: tableDataForTabOne.count)
var tabTwoState = PaginationState(totalItems: tableDataForTabTwo.count)
var tabThreeState = PaginationState(totalItems: tableDataForTabThree.count)

// Store the currently displayed data for each tab (this is what your TableView will use)
var displayedTabOneData: [DataModel] = []
var displayedTabTwoData: [DataModel] = []
var displayedTabThreeData: [DataModel] = []

2. Create a Reusable Pagination Helper Function #

Write a generic function to slice the original array safely, handling edge cases like the final page having fewer items than the page size:

func getPaginatedData<T>(from originalArray: [T], with state: PaginationState) -> [T] {
    let startIndex = (state.currentPage - 1) * state.pageSize
    guard startIndex < originalArray.count else { return [] }
    
    // Make sure we don't go beyond the array's bounds
    let endIndex = min(startIndex + state.pageSize, originalArray.count)
    return Array(originalArray[startIndex..<endIndex])
}

3. Load the First Page on Initialization/Tab Switch #

When your view loads or the user switches tabs, load the first page of data for the active tab:

// Example: Load first page for Tab One
func loadFirstPageForTabOne() {
    tabOneState.currentPage = 1
    displayedTabOneData = getPaginatedData(from: tableDataForTabOne, with: tabOneState)
    tabOneTableView.reloadData()
}

// Repeat similar functions for Tab Two and Tab Three

4. Handle Pull-to-Load-More #

Add logic to detect when the user scrolls to the bottom of the TableView, then load the next page if more data exists:

// Use the UIScrollView delegate to detect scroll position
func scrollViewDidScroll(_ scrollView: UIScrollView) {
    guard let activeTab = getCurrentSelectedTab() else { return }
    
    switch activeTab {
    case .tabOne:
        let hasMoreItems = tabOneState.currentPage * tabOneState.pageSize < tabOneState.totalItems
        if hasMoreItems && scrollView.hasReachedBottom() {
            tabOneState.currentPage += 1
            let newPageData = getPaginatedData(from: tableDataForTabOne, with: tabOneState)
            displayedTabOneData.append(contentsOf: newPageData)
            tabOneTableView.reloadData()
        }
    case .tabTwo:
        let hasMoreItems = tabTwoState.currentPage * tabTwoState.pageSize < tabTwoState.totalItems
        if hasMoreItems && scrollView.hasReachedBottom() {
            tabTwoState.currentPage += 1
            let newPageData = getPaginatedData(from: tableDataForTabTwo, with: tabTwoState)
            displayedTabTwoData.append(contentsOf: newPageData)
            tabTwoTableView.reloadData()
        }
    case .tabThree:
        let hasMoreItems = tabThreeState.currentPage * tabThreeState.pageSize < tabThreeState.totalItems
        if hasMoreItems && scrollView.hasReachedBottom() {
            tabThreeState.currentPage += 1
            let newPageData = getPaginatedData(from: tableDataForTabThree, with: tabThreeState)
            displayedTabThreeData.append(contentsOf: newPageData)
            tabThreeTableView.reloadData()
        }
    }
}

// Helper extension to check if scroll view has reached bottom
extension UIScrollView {
    func hasReachedBottom() -> Bool {
        let offsetY = contentOffset.y
        let contentHeight = contentSize.height
        let frameHeight = frame.size.height
        // Add a small buffer (20pt) to trigger load before hitting absolute bottom
        return offsetY >= (contentHeight - frameHeight - 20)
    }
}

5. Preserve State When Switching Tabs #

Since we're tracking separate state and displayed data arrays for each tab, switching between tabs will automatically preserve the user's scroll position and loaded data. Just make sure to reload the corresponding TableView when switching back to a tab.

Bonus Optimizations #

• Preload Next Page: To improve smoothness, trigger the next page load when the user scrolls to ~80% of the current page instead of waiting for the bottom.
• Pull-to-Reset: Add a pull-to-refresh control to reset the pagination state back to page 1 and reload the first page of data.

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