使用 Firestore 分页 - 不断带回相同的最后十个文档

Question

我正在尝试在Firestore上实现分页。我有 100 个文档。

我渲染的页面以前十个文档的限制开始，然后当我点击下一个按钮时，我想要另外十个，依此类推，直到所有 100 个文档都出现。第一次点击会降低接下来的 10 个，所以我得到了 20 个原始文档，正如我所期望的那样。下一次点击和所有后续点击都会继续降低相同的最后 10 个文档，即它不会降低新文档只是重复。有什么想法吗？编码新手...非常感谢..

var first = db.collection("trails").orderBy('title').limit(10);
first.get().then(function (documentSnapshots) {
documentSnapshots.docs.forEach(doc => {
//function to display in the HTML
console.log(doc.data(), doc.id);
addTrails(doc.data(), doc.id);
});
var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
console.log(lastVisible)

//select button for more trails to appear
const moreTrails = document.querySelector('.more-trails');
moreTrails.addEventListener('click', () => {
console.log('click')
var next = db.collection("trails").orderBy('title').startAfter(lastVisible).limit(10);
next.get().then(function (documentSnapshots) {
documentSnapshots.docs.forEach(doc => {
//function to display in the HTML
console.log(doc.data(), doc.id);
addTrails(doc.data(), doc.id);
});
})
})

Answer 1

如果我理解正确，你得到的是前 10 个和后 10 个，但从那里你得到的结果是一样的，也就是从 10 到 19。

如果是这种情况，我认为您不会从lastVisible更新值。

尝试做这样的事情，看看它是怎么回事：

next.get().then(function (documentSnapshots) {
lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
documentSnapshots.docs.forEach(doc => {
//function to display in the HTML
console.log(doc.data(), doc.id);
addTrails(doc.data(), doc.id);
});
})