Question

我看了这个示例https://cloud.google.com/firestore/docs/query-data/query-cursors => Paginate a query，以便从firestore中分页数据。

数据加载正常，如果到达页面底部，我会收到.limit(3)帖子。

但是，如果我再次滚动到底部，该函数会再次运行，这很好，但是它将再次加载相同的数据，并且不会从firestore加载更多帖子。

希望有人可以帮助我，谢谢！

代码：vuejs

mounted() {
   this.loadMoreData();
},
methods: {
 loadMoreData(posts) {
    window.onscroll = async () => {
      let bottomOfWindow =
          document.documentElement.scrollTop + window.innerHeight ===
          document.documentElement.offsetHeight;

       var vm = this;

       const db = firebase.firestore()

       function getMorePosts() {
          let first = db
            .collection("users")
            .doc(vm.userProfile.general.userId)
            .collection("posts")
            .orderBy("createdOn", "desc")
            .limit(3);

          return first.get().then(async documentSnapshots => {
            // Get the last visible document
            console.log(documentSnapshots);
            var lastVisible =
              documentSnapshots.docs[documentSnapshots.docs.length - 1];
            console.log("last", lastVisible);

            // Construct a new query starting at this document,
            // get the next 3 posts.
            const next = db
              .collection("users")
              .doc(vm.userProfile.general.userId)
              .collection("posts")
              .orderBy("createdOn", "desc")
              .startAfter(lastVisible)
              .limit(3)
              .onSnapshot(snapshot => {
                const allPosts = [];
                snapshot.forEach(doc => {
                  allPosts.push(doc.data());
                });
                // set data to vuex
                vm.$store.commit("posts/setProducts", allPosts);
              });
          });
        }

     if (bottomOfWindow) {
       getMorePosts();
       console.log("bottom");
     }
}

Answer 1

您从共享功能getMorePosts()的代码中获取了前三篇文章，并找到了最后一篇文章。然后，它使用第一个查询中的last visible文档作为游标来查询接下来的3个帖子。

问题在于，每次滚动到底部时，该函数总是执行相同的活动来获取前3个帖子，并获取接下来的3个帖子。

解决此问题的一种方法是将最后一个visible作为参数传递给函数。因此，最初last visible文档可以为空，然后可以将查询的帖子和查询的last visible文档作为参数传递，以加载更多的帖子，依此类推。

希望有帮助。

Firestore分页查询

1 个答案: