使用 Firebase 实现无限滚动？

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 来存储所有的键和一个 var 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];
        });
}

使用 Firebase 实现无限滚动？

Implementing Infinite Scrolling with Firebase?

javascript

firebase

firebase-realtime-database