Angular2/Firebase按timestamp子节点排序，从数组末尾查询实现无限滚动

我来帮你搞定这个无限滚动的逻辑！核心就是利用created时间戳做游标分页，既能按时间排序加载更早的帖子，又能保留实时获取新增内容的功能，咱们一步步来：

第一步：初始化变量与初始加载 #

首先得维护几个关键变量，用来追踪加载状态和查询游标：

• postFeed：存储帖子列表的数组
• lastCreated：记录当前列表里最早帖子的created时间戳（下一次加载更多的“锚点”）
• hasMore：标记是否还有更早的帖子可以加载
• subscription：实时监听新增帖子的订阅实例

先加载最新的10条帖子，同时设置好初始的游标和监听：

// 初始化变量
this.postFeed = [];
this.lastCreated = null;
this.hasMore = true;
this.subscription = null;

// 加载最新的10条帖子
const initialQuery = this.database.database.ref(`/posts/${this.userData.location}`)
  .orderByChild('created')
  .limitToLast(10);

initialQuery.once('value', (snapshot) => {
  const posts = [];
  // 遍历快照，Firebase会按升序返回结果，反转顺序让最新的帖子在列表顶部
  snapshot.forEach(childSnap => posts.unshift(childSnap.val()));
  
  this.postFeed.push(...posts);
  
  // 设置初始游标：取列表最后一条（最早的）帖子的created值
  if (this.postFeed.length) {
    this.lastCreated = this.postFeed.at(-1).created;
  } else {
    this.hasMore = false; // 一开始就没有帖子，标记无更多内容
  }

  // 开始实时监听新增帖子：只监听比当前最新帖子更新的内容
  const latestCreated = this.postFeed.length ? this.postFeed[0].created + 1 : 0;
  this.subscription = this.database.database.ref(`/posts/${this.userData.location}`)
    .orderByChild('created')
    .startAt(latestCreated);

  this.subscription.on('child_added', (snap) => {
    this.postFeed.unshift(snap.val()); // 新帖子直接插到列表最前面
  });
});

第二步：实现加载更多的函数 #

当用户滚动到列表底部（或者你设定的触发点），调用这个函数就能加载更早的一批帖子：

async loadMorePosts() {
  if (!this.hasMore) return; // 没更多内容就直接返回，避免重复请求

  // 查询比当前最早帖子更早的10条内容
  const moreQuery = this.database.database.ref(`/posts/${this.userData.location}`)
    .orderByChild('created')
    .endAt(this.lastCreated - 1) // 减1是为了跳过已加载的最后一条，避免重复数据
    .limitToLast(10);

  const snapshot = await moreQuery.once('value');
  const posts = [];
  snapshot.forEach(childSnap => posts.unshift(childSnap.val()));

  if (!posts.length) {
    this.hasMore = false;
    return;
  }

  // 把更早的帖子加到列表末尾
  this.postFeed.push(...posts);
  // 更新游标为新的最早帖子的created值
  this.lastCreated = this.postFeed.at(-1).created;

  // 如果返回的帖子不到10条，说明已经加载完所有内容了
  if (posts.length < 10) {
    this.hasMore = false;
  }
}

几个关键细节要注意 #

• 避免重复数据：用endAt(this.lastCreated - 1)确保不会重新获取已经加载过的最后一条帖子
• 顺序控制：示例里把最新帖子放在列表顶部，你可以根据UI需求改成push到末尾，只要对应调整实时监听的插入位置就行
• 实时监听优化：一开始就用startAt限定只监听比当前最新帖子更新的内容，不用再处理已经加载过的旧帖子
• 终止加载判断：当返回的帖子数量少于每页的10条，就标记hasMore为false，防止后续无效请求

内容的提问来源于stack exchange，提问作者Simon