I am trying to make ion-infinite-scroll work on big screens properly.
I have some elements pre-loaded on my page and ion-infinite-scroll wont load new elements, because the screen is too big. I also can’t scroll through these elements, because there is not enough of them to enable scrolling.
Here is some code that resolves this issue. Not sure how you are retrieving your data, but the service calls a php script with mysql query using the LIMIT and OFFSET.
I had similar issue early on, but found using a boolean with ng-if to tell when more data is available and fire off inifinite-scroll solved any issues.
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;
});
};