How to add “Load more” page when scrolling to bottom of table

Question

I'm trying to figure out the best way to handle paging or a "Load More..." when scoll to bottom in a UItableView. I'm loading this data from a web service, that's pretty flexible, giving me a pagesize and page parameter. Pagesize defines the number of results pulled back each time, whereas the page parameter defines groups of search results, for example:

page=1 (returns results 1-10).

page=2 (returns results 11-20)

Each time, when scroll down to bottom, i request to server 1 time and server will give me 1 page(1, 2, 3, 4 ....) and result. i tried to load like this

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat height = scrollView.frame.size.height;

    CGFloat contentYoffset = scrollView.contentOffset.y;

    CGFloat distanceFromBottom = scrollView.contentSize.height - contentYoffset;
    if(distanceFromBottom < height)
    {
        //to do something
        [self.viewController getPics];
    }

}

I'm not really sure how to tackle this. Any help would be great. Thanks in advance.

Answer 1

The following snippet will detect if the user scrolled to the bottom of the scroll view.
You can call the method to get more data from the server (asynchronous) in the body of if statement.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if ([scrollView contentOffset].y == [scrollView contentSize].height - [scrollView frame].size.height) {
        // The user did scroll to the bottom of the scroll view
    }
}

Answer 2

Your solution presents several flaws:

• First, you shouldn't use scrollViewDidScroll , as it is continually fired all along the scrolling. For that kind of feature, I've always preferred scrollViewDidEndDecelerating , which will only be triggered once per scrolling gesture.

• Second, you're currently verifying the user is at scrollView.frame.size.height or less from the bottom to reload. So if your scrollView is fullscreen with a navbar and status bar, this value will be 416px on an iPhone 4, 664px on an iPhone 5 - which is quite a lot. I advise you to compare distanceFromBottom which a much lower, hard coded value, such as 100.

Answer 3

Here is a demo (Thanks to original author!), you can integrate it into your own project easily!

Usage:

_footer = [MJRefreshFooterView footer];
_footer.scrollView = self.tableView;
_footer.beginRefreshingBlock = ^(MJRefreshBaseView *refreshView) {
    // Load more data
};