Hice el siguiente código refiriéndose al documento de paginación de FIREBASE.
( https://firebase.google.com/docs/firestore/query-data/query-cursors#web-v8_3 )
Sé que 'limit(3)' imprime 3 documentos, pero no sé cómo usar las variables 'siguiente' y 'última'.
Lo que quiero implementar es mostrar tres de mis publicaciones por página y pasar a la página siguiente cuando se presiona el botón.
Desde que acabo de empezar con el desarrollo web, todo es difícil. por favor, ayúdame
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); })Puedes probar esta función:
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()) }Al llamar a esta función, pase lastDocSnap como un parámetro:
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); }) }) Llame a esta función al cargar la página (como lastDocSnap será null , obtendrá los primeros 3 documentos). Llame a la misma función cuando el usuario haga clic en 'siguiente', pero esta vez como tenemos lastDocSnap , el método startAfter se agregará a la consulta. Básicamente, esto significa que la consulta primero ordenará el documento por fecha y luego buscará 3 documentos después del documento que pase en startAfter