javascript - infinitescroll - ngx infinite scroll install

Desplazamiento infinito con AngularJs y Firebase

Question

¿Cómo implementa scroll infinito en los datos que obtiene de firebase? Hasta ahora encontré una directiva angularjs, que funciona realmente bien, pero estoy teniendo dificultades para implementarla con fireable, ya que firebase devuelve todos los datos en una sola solicitud y esto no es lo que quiero.

Answer 1

Hace algunas semanas, hice una función JS que permitía un desplazamiento infinito en mi aplicación .

Primero, se muestra un conjunto de datos cuando el usuario visita el sitio web:

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

Entonces, la función que hace posible el desplazamiento infinito:

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

Finalmente, el desplazamiento infinito:

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

Funciona muy bien con pequeños conjuntos de datos. Espero que esto te ayude a resolver tu problema (o te dé más ideas).

ACTUALIZACIÓN octubre de 2015

Firebase tiene un crecimiento desde mi respuesta original, lo que significa que ahora es bastante fácil lograr un desplazamiento infinito utilizando solo su API de JavaScript :

Primero, te recomiendo crear un índice en tu Firebase. Para esta respuesta, creo este:

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

Entonces, hagamos magia con 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;
}

Finalmente, un mejor Desplazamiento Infinito (sin jQuery):

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

Estoy usando este enfoque con React y es increíblemente rápido sin importar qué tan grande sea tu información.