使用 Firestore 无限滚动答案

【问题标题】：Infinite scrolling with Firestore使用 Firestore 无限滚动
【发布时间】：2018-08-03 13:34:49
【问题描述】：

我已经进行了大量搜索，试图找到有关此主题的有用帖子或文章，但到目前为止没有运气。有很多分页/无限滚动教程，但这些都是 Angular 教程，我更愿意保持它纯粹和简单的 JS。

我想做的是在用户向下滚动 div 时从 Firestore 延迟加载数据。因此，最初加载一小部分数据，然后随着用户滚动而引入更多数据。到目前为止，我有以下代码：

firebase.initializeApp({
    apiKey: "AIzaSyDEkmqcwWFz6xCYAuS1jXCBcpxzCv_IlBE",
    authDomain: "test-903a0.firebaseapp.com",
    databaseURL: "https://test-903a0.firebaseio.com",
    projectId: "test-903a0",
    storageBucket: "test-903a0.appspot.com",
    messagingSenderId: "117341455405"
});
  
// Initialize Cloud Firestore through Firebase
const db = firebase.firestore();

var first = db.collection("users").orderBy("first").limit(2);
first.get().then(function (documentSnapshots) {
    var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
    documentSnapshots.forEach(function(doc) {
        $('#myTable').append('<tr><td>' + doc.data().first + '</td><td>' + doc.data().last + '</td><td>' + doc.data().born + '</td></tr>');
    })
    var next = db.collection("users").orderBy("first").startAfter(lastVisible).limit(2);
    jQuery(function($) {
        $('.scroll').on('scroll', function() {
            if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                next.get().then(function (documentSnapshots) {
                    documentSnapshots.forEach(function(doc) {
                        $('#myTable').append('<tr><td>' + doc.data().first + '</td><td>' + doc.data().last + '</td><td>' + doc.data().born + '</td></tr>');
                    });
                });
            };
        });
    });
});

.scroll {
    height: 400px;
    width: 400px;
    overflow: scroll;
}
.table-container {
    height: 1000px;
}
#myTable {
    border-collapse: collapse;
    width: 100%;
}
#myTable, th, td {
    border-bottom: 1px solid #ddd;
}
#myTable tr:nth-child(even) {
    background-color: #f2f2f2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="/__/firebase/init.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.2.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.2.0/firebase-firestore.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="scroll">
  <div class="table-container">
    <table id="myTable">
      <tbody>
      </tbody>
    </table>
  </div>
</div>

当我滚动这个 div 时，它会从 firestore 数据库加载接下来的 2 个结果。但是，此后滚动时，它只是将前 2 个结果加载回表中。有人可以告诉我哪里出了问题，因为我不知所措吗？

【问题讨论】：

请不要添加不相关的标签。 firebase-database标签用于firebase实时数据库，而这个问题是关于firestore的。

标签： javascript jquery firebase google-cloud-firestore

【解决方案1】：

我认为每次获取新页面时都需要更新 lastVisible 和 next...所以类似于（未经测试）：

    $('.scroll').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            var next = db.collection("users").orderBy("first").startAfter(lastVisible).limit(2);
            next.get().then(function (documentSnapshots) {
               lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
                documentSnapshots.forEach(function(doc) {
                    $('#myTable').append('<tr><td>' + doc.data().first + '</td><td>' + doc.data().last + '</td><td>' + doc.data().born + '</td></tr>');
                });
            });
        };
    });

【讨论】：