使用 AngularJs 和 Firebase 进行无限滚动 [英] Infinite scroll with AngularJs and Firebase

问题描述

您如何对从 firebase 获得的数据实现无限滚动.到目前为止，我发现了一个 angularjs 指令，效果很好，但我很难实现它与 fireable 作为 firebase 在一个请求中返回所有数据，这不是我想要的.

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

最后，无限滚动:

// 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 月更新

Firebase 自从我最初的响应以来有了增长，这意味着现在只需使用其 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:

首先，我建议创建一个索引 在您的 Firebase 中.对于这个答案，我创建了这个:

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"
      }
   }
}

然后，让我们用 Firebase 创造一些魔法:

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

我将这种方法与 React 结合使用，无论您的数据有多大，它都非常快速.

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

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