时间戳

首页 > 解决方案 > 如何按 Firestore 中的项目数分页或无限滚动？

firebase - 如何按 Firestore 中的项目数分页或无限滚动？

问题描述

要求

  1. 开始时将加载 20 个项目。
  2. 当用户滚动到结束时，将加载 20 多个项目。

问题 Firestore 查询具有适用于字段值的startAt()方法。我想在索引上工作。endAt()OrderBy

interface Product{
   price:number;
}

假设有 100 个 20 美元的产品和 30 个 10 美元的产品。可以获取第一个负载

query
.orderBy(price,desc)
.limitTo(20)

现在最后一件商品的价格是 20 美元。加载接下来的 20 个结果

query
.orderBy(price,desc)
.startAt(20$)
.limitTo(20)

它将返回相同的结果。

标签： firebasegoogle-cloud-firestore

解决方案

您应该“使用文档快照来定义查询光标”，如此处文档中所述：https ://firebase.google.com/docs/firestore/query-data/query-cursors#use_a_document_snapshot_to_define_the_query_cursor

因此，您将执行以下操作：

var first = db.collection("....").orderBy("price", "desc").limit(20);

return first.get().then(function (documentSnapshots) {
  // Get the last visible document
  var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
  console.log("last", lastVisible);

  // Construct a new query starting at this document,
  // Get the next 20 cities.
  var next = db.collection("....")
          .orderBy("price", "desc")
          .startAfter(lastVisible)
          .limit(20);
});

推荐阅读