使用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>
});

过去几天类似问题的答案:

• 我可以获得firebase"查询"的第n项吗？
• Firebase结果范围使用startAt和endAt