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


#1

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!


#2

This is part of a bug in v2


#3

Hi Mike,

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


#4

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