如何对从Firebase获取的数据实施无限滚动。到目前为止,我找到了angularjs 指令,该指令确实非常有效,但是由于firebase 在单个请求中返回所有数据,我很难用fireable 实现它,这不是我想要的。
几周前,我做了一个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); });
然后,使无限滚动成为可能的函数:
// 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(); } });
它适用于小型数据集。我希望这可以帮助您解决问题(或给您更多的想法)。
2015年10月更新
自从我最初的回答以来,Firebase有了增长,这意味着现在仅使用Javascript API即可实现无限滚动非常容易:
首先,我建议在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; }
最后,一个更好的 无限滚动 (没有jQuery):
window.addEventListener('scroll', function() { if (window.scrollY === document.body.scrollHeight - window.innerHeight) { getDataset(); } });
我在React中使用这种方法,无论您的数据量有多大,它的运行速度都非常快。