网站开发新手。预先感谢!
我正在尝试通过调用分页查询来显示存储在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,
});
答案 0 :(得分:0)
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]
})