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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Where to get the firebase-util.min.js file in the ionic structure?