Enable ion-infinite-scroll in ion-content with a small number of elements

Hi.

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.

Screenshot:

Is it possible to enable scrolling in ion-content, so an ion-infinite-scroll would fire until whole screen is covered with data?

Thanks!

This is part of a bug in v2

1 Like

Hi Mike,

Thank you for the response! Hopefully this issue will be resolved soon.

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.

HTML:

<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>	

Controller:

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:

.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;
		}
	};	
}])