Firebase:Paginate Infinite Scroll

时间:2015-05-12 15:07:31

标签: angularjs pagination firebase angularfire firebase-util

我正在关注Firebase-util Paginate Infinite Scroll demo,并想知道是否有办法加载初始数量的项目,而不是首先加载0项。

当我点击我的按钮时,我正在加载接下来的16个项目。有没有办法可以在初始加载时加载16个项目,然后在点击我的按钮等时再加载16个?

我的HTML和JS看起来像这样:

的index.html

<h3>Items loaded: {{scrollItems.length}}</h3>
<button ng-click="scrollItems.scroll.next(16)">Load Next 16</button>

app.js

app.controller('ServiceListController', ['$scope', '$firebaseArray', '$scrollArray',
  function($scope, $firebaseArray, $scrollArray) {
    var servicesRef = new Firebase('https://fbutil.firebaseio.com/paginate');
    $scope.scrollItems = $scrollArray(servicesRef, 'number');
}])

app.factory('$scrollArray', ['$firebaseArray', function($firebaseArray) {
  return function(ref, field) {
    var scrollRef = new Firebase.util.Scroll(ref, field);
    var list = $firebaseArray(scrollRef);
    list.scroll = scrollRef.scroll;

    return list;
  }
}])

以下是demo的实际操作。

对此有任何帮助表示赞赏。提前谢谢!

1 个答案:

答案 0 :(得分:1)

你可以告诉它立即获得前16名。

list.scroll = scrollRef.scroll;
list.scroll.next(16);
return list;

如果你在滚动时查看firebase util的文档:https://github.com/firebase/firebase-util/blob/master/src/Paginate/README.md

他们在滚动用法下有这些行:

// download the first 20 records
scrollRef.scroll.next(20);