Ionic-framework: InfiniteScroll and ensuring there is "enough" data

[cfjedimaster]

Short description of the problem:

I was working on an application that made use of InfiniteScroll. I did most of my testing in the browser before switching to the iOS emulator. I noticed that when I switched, I no longer had enough data to "fill" the view. Why? I was using a relatively small dataset (10 items) that just so happened filled the view post on the browser and not the emulator.

Now to be clear, I think 10 is too small. I think normally you would want 20-50 items so the user can scroll a bit before InfiniteScroll fires off a request for more data.

So my question is:

Would not having enough items in the view port cause InfiniteScroll to _never_ fire since you can't scroll down to get more?

If so, we should document this. I understand that it may be bad to say, "You should always use 20" since obviously it won't be appropriate for all situations, but the docs should talk about how you want to provide enough to fill the viewport for various devices.

[jgw96]

Hey @cfjedimaster ! So yeah, if you dont have enough data in your infinite scroll list to actually need to scroll then it will never fire off a request for more data because no scrolling is happening and it works off scroll events. Would you be able to open up an issue in this repo: https://github.com/driftyco/ionic-site, with the docs suggestion? BTW, thanks for using ionic and being such an active member of the community!

[cfjedimaster]

Done: https://github.com/driftyco/ionic-site/issues/584

Also, this is for v2. I meant I was using v2. Obviously it might apply to v1 too I guess. Either way, update all the docs. :)

[jgw96]

Thanks! Im gonna go ahead and close this issue.

[jgw96]

Reopening as we have decided that this is an actual bug and should be fixed.

[cfjedimaster]

So what is the bug then? If I use a 10 items and it doesn't fill the viewport, will the fix be to fire off calls to the handler immediately?

[rgecy]

I had similar issue early on, but found using a boolean to tell when more data is available solved any issues. My app calls a php script which queries a mysql database and uses the mysql LIMIT and OFFSET.

<ion-list>
    <ion-item collection-repeat="item in requests" class="item-thumbnail-left" 
                          ng-click="goToDetail(item)">
        <img ng-if="item.imageName" ng-src="{{item.imageName}}">
        <h2 class="strong">{{item.name}}</h2>
        <h3>{{item.locationAddress}}</h3>
        <p >{{item.description}}</p>
    </ion-item>

    <ion-infinite-scroll ng-if="moreCanBeLoaded"
                         on-infinite="loadMoreRequests()"
                         spinner="bubbles"
                         distance="10%">
    </ion-infinite-scroll>
</ion-list> 

var offset = 0,
    limit = 20; // I used 20 here but change to say 3 or 5 and works also!

$scope.requests = [];   
$scope.moreCanBeLoaded = true;

$scope.loadMoreRequests = function () {
    offset = $scope.requests.length;
    RequestData.getRequests(offset, limit).then( function (data) {
        if (data.requests != '' ){
            Array.prototype.push.apply($scope.requests, data.requests);
            $scope.$broadcast('scroll.infiniteScrollComplete');
        } else {
            $scope.moreCanBeLoaded = false;
            $scope.$broadcast('scroll.infiniteScrollComplete');
        }
    }, function () {
        $scope.$broadcast('scroll.infiniteScrollComplete');
        $scope.moreCanBeLoaded = false;
    });
};

    .factory('RequestData', ['$q', '$http', 'URLS', function ($q, $http, URLS) {
        return {
            getRequests: function (offset, limit) {
                var q = $q.defer();
                $http({
                    method: 'POST',
                    url: URLS.baseURL+URLS.getRequests+'?offset='+offset+'&limit='+limit,
                    config: {timeout: 5000}
                }).then(function (resp) {
                    q.resolve(resp.data);                                       
                }, function (resp){ 
                    q.reject(resp.data);    
                });             
                return q.promise;
            }
        };  
    }])

[PureSpider]

Was this bug ever fixed? I am still running into the same problem in ionic 3.19.0!

[katyagurto]

fixed for us, for now, by making the page size 20 instead of 10!

[uodriozola]

Have you fixed this bug?? I am having the same problem in Ionic 4.

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/45