Firebase：分页无限滚动答案

【问题标题】：Firebase: Paginate Infinite ScrollFirebase：分页无限滚动
【发布时间】：2015-05-13 02:42:02
【问题描述】：

我正在关注 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 的实际操作。

对此的任何帮助表示赞赏。提前致谢！

【问题讨论】：

你们如何初始化 Firebase.util.Scroll？为了使用这个库，我需要安装一个 npm 吗？我有一个关于在哪里声明 javascript 的问题，我是否将它放在我的 index.html 中，或者如果使用 ionic2 的话。在我的 index.html TypeError 中声明 firebase-util.js 时出现此异常：无法读取未定义的属性“滚动”

标签： angularjs pagination firebase angularfire firebase-util

【解决方案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);

【讨论】：