Ionic Infinite Scroll
Ionic Infinite Scroll – ionInfiniteScroll directive allows you to call a function when user reaches at the bottom of the page. The ionInfiniteScroll is basically child of ionContent or ionScroll. on-infinite is used to call the function on scroll event when user reaches at the bootom of the page. Here in this tutorial we are going to explain how to call the function on on-infinite on infinite scroll.
Ionic Infinite Scroll
Here is very basic and simple example of ionInfiniteScroll
Ionic Infinite Scroll : Html Part
Ionic Infinite Scroll:
<ion-content ng-controller="MainCtrl"> <ion-list> <ul class="list"> <li class="item"> Item 1 </li> <li class="item"> Item 2 </li> <li class="item"> Item 3 </li> <li class="item"> Item 4 </li> <li class="item"> Item 5 </li> <li class="item" ng-repeat="item in items" style="" > {{item}} </li> </ul> </ion-list> <ion-infinite-scroll on-infinite="loadMoreData()" distance="1%"> </ion-infinite-scroll> </ion-content> |
Let us create javascript part with controller and function to call the function when user scrolls on the bootm of the screen.
Ionic Infinite Scroll : Controller Part
The controller part contains the following function to load the data from server-
Ionic Infinite Scroll Controller Example
.controller('MainCtrl', function($scope, $http) { $scope.items = []; $scope.loadMoreData = function() { $http.get('url_to_load content').then(function(resp) { $scope.items = resp.item;// json format replace with your data format returned from server $scope.$broadcast('scroll.infiniteScrollComplete'); }, function(err) { console.error('ERR', err); // err.status will contain the status code }); }; }); |
The above example loads data from server when you scroll to the bottom of the screen. The above example will produce the output something like this –
Options
- on-infinite [expression] – Used to call when the scroller reaches at the bottom of screen.
- distance [optional(string)]– The distance from bottom when the function shoud be called Default distance is 1%.
- spinner [optional(string)] – The ionSpinner to show when loading.
- icon [optional(string)] – This is used to specify the icon to show while loading.
- immediate-check [optional(boolean)] – This is used to check the infinite scroll bounds immediately on load.
Advertisements