Javascript 带有AngularJs和Firebase的无限卷轴

如何对从firebase获得的数据实现无限滚动。到目前为止，我发现了一个angularjs，它非常好用，但我在fireable中实现它时遇到了困难，因为firebase在一个请求中返回所有数据，这不是我想要的。

几周前，我制作了一个JS函数，允许无限滚动

首先，当用户访问网站时，将显示一组数据：

// Add a callback that is triggered for each message.
var n = 25; // Step size for messages display.
$(window).load(function() {
lastMessagesQuery = messagesRef.limit(n); 
lastMessagesQuery.on('child_added', function (snapshot) {
  var message = snapshot.val();
  $('<div/>').text(message.text).prependTo($('#messagesDiv'));
  $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
});
$('#messagesDiv').fadeTo(1000, 1);
});

它适用于小数据集。我希望这能帮助你解决问题（或者给你更多的想法）

---

2015年10月更新

自我最初的回应以来，Firebase一直在增长，这意味着现在只需使用其：

首先，我建议您在Firebase中使用。对于这个答案，我创建了一个：

{
   "rules": {
      ".read": true,
      ".write": false,
      "messages": {
         ".indexOn": "id"
      }
   }
}

然后，让我们用Firebase制作一些魔术：

// @fb: your Firebase.
// @data: messages, users, products... the dataset you want to do something with.
// @_start: min ID where you want to start fetching your data.
// @_end: max ID where you want to start fetching your data.
// @_n: Step size. In other words, how much data you want to fetch from Firebase.
var fb = new Firebase('https://<YOUR-FIREBASE-APP>.firebaseio.com/');
var data = [];
var _start = 0;
var _end = 9;
var _n = 10;
var getDataset = function() {
   fb.orderByChild('id').startAt(_start).endAt(_end).limitToLast(_n).on("child_added", function(dataSnapshot) {
      data.push(dataSnapshot.val());
   });
   _start = _start + _n;
   _end = _end + _n;
}

---

我正在使用这种方法，无论您的数据有多大，它的速度都非常快。

如果无法在Firebase中对数据进行分页，那么无限滚动就没有意义了。但不知何故，我很难相信没有分页功能-您搜索过他们的API文档吗？实际上，它就是分页功能。：）在哪里添加无限滚动？当我离开时，我什么也没发生scroll@JohnAndrews我将其添加到我的主JS文件中。如果您使用的是React，请看这个示例：（顺便说一句，您需要显示

数据

，以便使事情发生。）这意味着每次调用

getDataSet（）

时都要在

侦听器上注册
。。。这合理吗？而且，如果一个子元素被添加到一个已经加载的页面，你的代码会将它推到列表的末尾，而不是插入到正确的位置。你是对的@antoine129，我的代码只按升序工作，但这完全取决于你的需求。您可以轻松地反转
数据
阵列以满足您的需要。。。类似于
var\u data=data.reverse（）或使用。
{
   "rules": {
      ".read": true,
      ".write": false,
      "messages": {
         ".indexOn": "id"
      }
   }
}

// @fb: your Firebase.
// @data: messages, users, products... the dataset you want to do something with.
// @_start: min ID where you want to start fetching your data.
// @_end: max ID where you want to start fetching your data.
// @_n: Step size. In other words, how much data you want to fetch from Firebase.
var fb = new Firebase('https://<YOUR-FIREBASE-APP>.firebaseio.com/');
var data = [];
var _start = 0;
var _end = 9;
var _n = 10;
var getDataset = function() {
   fb.orderByChild('id').startAt(_start).endAt(_end).limitToLast(_n).on("child_added", function(dataSnapshot) {
      data.push(dataSnapshot.val());
   });
   _start = _start + _n;
   _end = _end + _n;
}

window.addEventListener('scroll', function() {
  if (window.scrollY === document.body.scrollHeight - window.innerHeight) {
     getDataset();
  } 
});