无限滚动与AngularJs和火力地堡 [英] Infinite scroll with AngularJs and Firebase

问题描述

如何实现在你从火力获取数据无限滚动。到目前为止，我发现了一个angularjs 指令，那真正伟大的作品，但我有难同fireable作为火力点实施它返回在一个单一的请求中的所有数据，这是不是我想要的。

How do you implement infinite scroll on data that you get from firebase. So far I found an angularjs directive, that works really great but I'm having difficulty implementing it with fireable as firebase returns all data in one single request and this is not what I want.

推荐答案

几个星期前，我做了一个让JS功能的我的应用程序。

Few weeks ago, I made a JS function that allowed an infinite scrolling in my app.

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

First, a set of data is displayed when the user visit the website:

// 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);
});

然后，让尽可能无限滚动功能：

Then, the function that makes possible the infinite scrolling:

// Pagination.
var i = 0; // Record variable.
function moreMessages () { 
i += n; // Record pagination updates. 
moreMessagesQuery = messagesRef; // Firebase reference.
moreMessagesQuery.on('value', function (snapshot) {
  var data = snapshot.exportVal(); // Fetch all data from Firebase as an Object.
  var keys = Object.keys(data).reverse(); // Due to the Keys are ordered from the oldest to the newest, it nessesary to change its sequence in order to display Firebase data snapshots properly.
  var total_keys = Object.keys(data).length;
  var k = keys[i]; // Key from where to start counting. Be careful what Key you pick.
  if (i < total_keys) { // Stop displaying messages when it reach the last one.
    lastMessagesQuery = messagesRef.endAt(null, k).limit(n); // Messages from a Key to the oldest.
    lastMessagesQuery.on('child_added', function (snapshot) {
      var message = snapshot.val();
      $('<div/>').text(message.text).appendTo($('#messagesDiv')).hide().fadeIn(1000); // Add set of messages (from the oldest to the newest) at the end of #messagesDiv.
    });
  }  
});
}

最后，无限滚动：

Finally, the infinite scrolling:

// Load more messages when scroll reach the bottom.
$(window).scroll(function() { 
if (window.scrollY == document.body.scrollHeight - window.innerHeight) {
  moreMessages();
}  
}); 

这与小数据集的伟大工程。我希望这可以帮助你解决你的问题（或者给你更多的想法）。

It works great with small data sets. I hope this helps you to solve your problem (or gives you more ideas).

更新2015年10月

火力地堡有增长，因为我原来的响应，这意味着现在是pretty轻松实现无限滚动只是用它的 Javascript API第：

Firebase has growth since my original response, which means now it's pretty easy to achieve an infinite scrolling just using its Javascript API:

首先，我建议<一href=\"https://www.firebase.com/docs/security/guide/indexing-data.html#section-indexing-order-by-child\"相对=nofollow>创建您的火力地堡索引。对于这个答案，我创建了这个：

First, I recommend to create an Index in your Firebase. For this answer, I create this one:

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

然后，让我们做一些与魔法火力地堡：

Then, let's make some magic with 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;
}

最后，更好的无限滚动的（不包括jQuery的）：

Finally, a better Infinite Scrolling (without jQuery):

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

我使用的是 做出反应，它的速度极快，无论你的数据有多大

I'm using this approach with React and it's blazing fast no matter how big your data is.

这篇关于无限滚动与AngularJs和火力地堡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！