javascript - Firebase 分页

Question

下面的代码引用了FIREBASE的分页文档。

( https://firebase.google.com/docs/firestore/query-data/query-cursors#web-v8_3 )

我知道“limit(3)”会打印 3 个文档，但我不知道如何使用“next”和“last”变量。

我想要实现的是每页显示我的三个帖子，并在按下按钮时移至下一页。

刚开始做web开发，什么都难。请帮助我

var first = db.collection('product').orderBy('date').limit(3);

var paginate = first.get().then((snapshot)=>{
    snapshot.forEach((doc) => {
      console.log(doc.id);
      var summary = doc.data().content.slice(0,50);
      var template = `<div class="product">
        <div class="thumbnail" style="background-image: url('${doc.data().image}')"></div>
        <div class="flex-grow-1 p-4">
          <h5 class="title"><a href= "/detail.html?id=${doc.id}">${doc.data().title}</a></h5>
          <p class="date">${doc.data().date.toDate()}</p>
          <p class = "summary">${summary}</p>
        </div>
      </div>
      <hr>`;  
      $('.container').append(template);
    })

Answer 1

你可以试试这个功能:

let lastDocSnap = null

async function getNextPage(lastDoc) {
  let ref = db.collection('product').orderBy('date')
  
  // Check if there is previos snapshot available
  if (lastDoc) ref = ref.startAfter(lastDoc)
  const snapshot = await ref.limit(3).get()

  // Set new last snapshot
  lastDocSnapshot = snapshot.docs[snapshot.size - 1]

  // return data
  return snapshot.docs.map(d => d.data())
}

调用此函数时，将 lastDocSnap 作为参数传递:

getNextPage().then((docs) => {
  docs.forEach((doc) => {
    // doc itself is the data of document here
    // Hence .data() is removed from original code

    console.log(doc.id);
    var summary = doc.content.slice(0,50);
    var template = `<div class="product">
        <div class="thumbnail" style="background-image: url('${doc.image}')"></div>
        <div class="flex-grow-1 p-4">
          <h5 class="title"><a href= "/detail.html?id=${doc.id}">${doc.title}</a></h5>
          <p class="date">${doc.date.toDate()}</p>
          <p class = "summary">${summary}</p>
        </div>
      </div>
      <hr>`;  
      $('.container').append(template);
  })
})

在页面加载时调用此函数(因为 lastDocSnap 将为 null，它将获取前 3 个文档)。当用户单击“下一步”时调用相同的函数，但这次我们有 lastDocSnap，startAfter 方法将添加到查询中。这实质上意味着查询将首先按日期对文档进行排序，然后在 您在 startAfter

中传递的文档之后获取 3 个文档