Last active
April 12, 2017 14:12
-
-
Save katowulf/7adb5775dce44cbbba0a to your computer and use it in GitHub Desktop.
Example of infinite scroll in Ionic with Firebase (utilizes Firebase.util.Scroll; http://firebase.github.io/firebase-util/)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var app = angular.module('myapp', ['ionic', 'firebase']) | |
app.controller('ctrl', function($scope, $firebaseArray) { | |
// create a connection to Firebase | |
var baseRef = new Firebase('https://webapi.firebaseio.com/rolodex'); | |
// create a scrollable reference | |
var scrollRef = new Firebase.util.Scroll(baseRef, 'name'); | |
// create a synchronized array on scope | |
$scope.items = $firebaseArray(scrollRef); | |
// load the first three contacts | |
scrollRef.scroll.next(3); | |
// This function is called whenever the user reaches the bottom | |
$scope.loadMore = function() { | |
// load the next contact | |
scrollRef.scroll.next(1); | |
$scope.$broadcast('scroll.infiniteScrollComplete'); | |
}; | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<ion-view view-title="Contacts"> | |
<ion-content class="padding"> | |
<div class="list card" ng-repeat="item in items"> | |
{{item|json}} | |
</div> | |
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll> | |
</ion-content> | |
</ion-view> |
Where to get the firebase-util.min.js file in the ionic structure?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@rizqyhi items will be ordered in ascending order by default. One workaround, would be to add a field to the item and decrement its value on every insertion.
So for eg:
var scrollRef = new Firebase.util.Scroll(baseRef, 'orderId');
Here 'orderId' can be a field on your item. The first item has orderId of 1 or 1million (doesnt matter) and you decrement that value everytime you insert an item to the array. The result in your scroll view will be new items will always appear at the top of the list.