Question

我已经进行了大量的搜索工作，试图找到关于该主题的有用的帖子或文章，到目前为止，还没有运气。有很多分页/无限滚动教程，但是这些是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个结果加载回表中。有人可以告诉我我茫然无措的地方在哪里错了吗？

Answer 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>');
                });
            });
        };
    });

使用Firestore无限滚动

1 个答案: