使用 Firebase 实现无限滚动？答案

【问题标题】：Implementing Infinite Scrolling with Firebase?使用 Firebase 实现无限滚动？
【发布时间】：2018-04-30 12:33:45
【问题描述】：

      var self = this;
      var firebaseRef = new Firebase(baseUrl + '/sparks');

      firebaseRef.limitToLast(5).on('child_added', function(childSnapshot, prevChildKey) {
        self.addChild(childSnapshot); // adds post to a <div>
      });

我的代码当前加载最后 5 个帖子，并将加载任何新帖子。但是，我也希望能够加载较旧的帖子。我有一个按钮，单击该按钮将调用一个加载旧帖子的函数（我不确定如何实现）。 如何检索这些旧帖子？

（箭头只是表示我想从底部开始检索帖子并一直到顶部）

【问题讨论】：

什么是__firebaseKey__？你能在 jsfiddle/jsbin 之类的网站上设置 repro 吗？
@FrankvanPuffelen 我更新了我的帖子。希望更清楚我的目标是什么

标签： javascript firebase firebase-realtime-database

【解决方案1】：

您需要向后考虑一下才能做到这一点。当您获得第一页的查询结果时，请记住结果中的第一项：

firebaseRef.endAt().limitToLast(5).on('child_added', function(childSnapshot, prevChildKey) {
    self.addChild(childSnapshot); // adds post to a <div>
  });

虽然您无法通过 Firebase 的索引访问子项目，但您可以存储项目的键并使用它来启动下一个查询。

var firstKnownKey;
firebaseRef.orderByKey().limitToLast(5).on('child_added', function(childSnapshot, prevChildKey) {
    if (!firstKnownKey) {
      firstKnownKey = childSnapshot.key;
    }
    self.addChild(childSnapshot); // adds post to a <div>
});

现在您有一个变量 firstKnownKey ，其中包含您见过的第一个键。要获取上一批子项，请在触发下一个查询时将该值传递给 endAt()：

firebaseRef.orderByKey().endAt(firstKnownKey).limitToLast(5).on('child_added', function(childSnapshot, prevChildKey) {
    if (!firstKnownKey) {
      firstKnownKey = childSnapshot.key;
    }
    self.addChild(childSnapshot); // adds post to a <div>
});

前几天类似问题的回答：

【讨论】：

谢谢，这正是我所需要的。我的问题不是使用 orderByKey()，而是使用 startAt 而不是 EndAt 和 limitToFirst 而不是 limitToLast！
@Frank，您的第三段代码每次都会返回相同的结果，因为firstKnownKey 将与我们获得第一批时相同。
您必须为您加载的每个页面更新firstKnownKey。
我已经花了 8 个多小时来完成这项工作。你能给我们一个更详细的例子吗？我有这个：i.imgur.com/7WTWxYu.png 让第一批工作正常，但之后我会收到重复的结果集，我不知道如何解决这个问题。谢谢！
@FinPercy 编辑时请使用 绕过 6 个字符的限制。

【解决方案2】：

由于endAt() 包含在内，所以每次我进行无限滚动时都会重复最后一项，所以我对frank van puffen 的答案进行了一些修改。

我启动一个列表childrenVal 来存储所有值，另一个列表childrenKey 来存储所有键和一个变量firstKnownKey，正如frank van puffen 所建议的那样。

var childrenVal=[];
var childrenKey=[];
var firstKnownKey = "";

第一次进行查询时，您将获得最后 5 个元素：

getFirst(){
    firebaseRef.orderByKey().limitToLast(5).once('value')
        .then((snap)=>{
            snap.forEach(childSnap => {
                childrenVal.unshift(childSnap.val());
                childrenKey.unshift(childSnap.key);
            });
            firstKnownKey = childrenKey[childrenKey.length-1];
        });
}

在您的下一个查询中，您不希望您的firstKnownKey 被重复，所以我执行了以下功能：

exclude(key){
    return key.substring(0, key.length - 1) + String.fromCharCode(key.charCodeAt(key.length - 1) - 1)
}

对于查询本身，以下函数：

getNext() {
    firebaseRef.orderByKey().endAt(exclude(firstKnownKey)).limitToLast(5).once('value')
        .then((snap) => {
            snap.forEach(childSnap => {
                childrenVal.unshift(childSnap.val());
                childrenKey.unshift(childSnap.key);
            });
            firstKnownKey = childrenKey[childrenKey.length - 1];
        });
}

【讨论】：