时间戳

首页 > 解决方案 > Firebase 分页

javascript - Firebase 分页

问题描述

我参考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);
    })

标签： javascripthtmlfirebasegoogle-cloud-firestore

解决方案

你可以试试这个功能：

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方法将被添加到查询中。这实质上意味着查询将首先按日期对文档进行排序，然后在您传入的文档之后获取 3 个文档startAfter

推荐阅读