无限滚动+同位素+ Firebase Firestore实现分页

如何解决无限滚动+同位素+ Firebase Firestore实现分页

网站开发新手。预先感谢！

我正在尝试通过调用分页查询来显示存储在Firestore中的项目。目标是每次用户滚动到页面底部时，我们都将调用Firestore，检索更多项目并显示它们。

我发现Infinite Scroll（https://infinite-scroll.com/）和Isotope（https://isotope.metafizzy.co/）可能会有所帮助，但尝试了一段时间却无法解决。

目前，我拥有的是：

  var itemCollection = []
  recipeRef.get().then(function(querySnapshot) {
    var lastVisible = querySnapshot.docs[querySnapshot.docs.length - 1]
    querySnapshot.forEach(function(doc) {
      itemCollection.push(doc.data());
    })
    return res.render('user',{...})})
                  

我可能必须触发一个事件以读取Firestore中的更多项目，然后将结果推送到阵列并显示。但是我只在下面找到示例代码。

此示例代码似乎具有一个“预加载”页面，无需从数据库中查询，只需将该页面作为同位素对象附加即可。就我而言，我所拥有的是一个数组，我确实需要阅读Firestore，所以不太确定该怎么做。任何帮助或指示，我们将不胜感激。

// with Isotope & jQuery
// init Isotope
var $grid = $('.grid').isotope({
  // Isotope options...
  itemSelector: '.grid__item',});

// get Isotope instance
var iso = $grid.data('isotope');

// init Infinite Scroll
$grid.infiniteScroll({
  // Infinite Scroll options...
  append: '.grid__item',outlayer: iso,});

解决方法

firestore支持orerBy和StartAfter，您可以保留最后一个文档，并使用该文档请求下一个查询

let lastDoc=null
db.collection('collectionName').orderBy('orderingKey').limit(10).get()
.then(docs=>{
    const data = docs.map(doc=>doc.data());
    lastDoc = data[data.length-1]
})

要分页

db.collection('collectionName').orderBy('orderingKey').startAfter(lastDoc)
.limit(10).get()
.then(docs=>{
    const data = docs.map(doc=>doc.data());
    lastDoc = data[data.length-1]
})