Firebase Javascript：按降序对帖子进行分页

Posted 2023-03-14

【中文标题】Firebase Javascript：按降序对帖子进行分页

【英文标题】：Firebase Javascript: Paginating Posts in Descending Order

【发布时间】：2017-04-27 23:44:41

【问题描述】：

我的 Firebase 数据库存储了我想向用户显示的帖子列表。我有一个分页，每个页面存储 10 个帖子。但是，在当前的形式中，数据库将帖子从最早的帖子分页到最新的帖子，而不是在此处显示最新的帖子。这尤其成问题，因为 Firebase 不允许同时进行多个查询，并且我需要将键作为分页系统的一部分进行查询，因为每次用户转到下一页时我都需要存储页面的最后一个键，如新页面上的所有帖子都将从上一页的最后一个键开始。如何确保帖子按降序（从最新到最早）顺序列出？

Firebase / Javascript

var database = firebase.database().ref();
var postsRef = database.child("posts");


var currentPage = 0;
var keyArray = [];
var limit = 0;

function listThoughts(page) 
    if (page == 0) 
        postsRef.orderByChild("key").limitToFirst(10).on("child_added", function(snapshot) 

            var thought = snapshot.val();

            $("#feed").append("<div class='thought2'><div class='heading'>Posted on " + thought.utctime + " by " + thought.username
            + " | <a href='#' class='reply'>Reply</a></div><div class='else'>" + thought.title + "</div></div");    

            keyArray[0] = thought.key;
        );
    
    else 
        var elementCount = 0;

        console.log("Staring At: " + keyArray[page - 1]);

        postsRef.orderByChild("key").limitToFirst(10).startAt(keyArray[page - 1]).on("child_added", function(snapshot) 
            var thought = snapshot.val();
            console.log("THOUGHT: " + thought);
            $("#feed").append("<div class='thought2'><div class='heading'>Posted on " + thought.utctime + " by " + thought.username
            + " | <a href='#' class='reply'>Reply</a></div><div class='else'>" + thought.title + "</div></div");    

            keyArray[page] = thought.key;

            elementCount += 1;
        );

        if (elementCount < 10) 
            limit = page;
        
    


listThoughts(currentPage);

function changeTab(direction) 
    if (direction == -1 && currentPage > 0) 
        currentPage -= 1;
        console.log("Current Tab: " + currentPage);
        $("#feed").empty();
        listThoughts(currentPage);
    
    if (direction == 1) 
        if (limit == 0 || currentPage < limit) 
            currentPage += 1;
            console.log("Current Tab: " + currentPage);
            $("#feed").empty();
            listThoughts(currentPage);
        
    

HTML

<div class="content-three">
    <div id="feed">
    </div>
</div>

<div class="center">
    <button onclick="changeTab(-1)">&lt;</button>
    <button onclick="changeTab(1)">&gt;</button>
</div>

这是我的数据的结构方式： Data Structure

【参考方案1】：

我的解决方案是将日期存储为每个帖子的键。这样一来，我就可以同时查询所有帖子，从最新到最旧的顺序，同时能够跟踪页面的起始帖子。