Question

      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个帖子并将加载任何新帖子。但是，我也希望能够加载旧帖子。我有一个按钮，当点击它将调用一个功能（我不知道如何实现）加载旧帖子。 如何检索这些较旧的帖子？

（箭头只表示我想从底部开始检索帖子并一直向上移动）

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

对过去几天类似问题的回答：

Answer 2

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

我发起了一个列表childrenVal来存储所有值，另一个列表childrenKey用于存储所有键，另一个列表firstKnownKey用于frank van puffen sugest。

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

使用Firebase实现无限滚动？

2 个答案: