以降序显示帖子

Question

我正在尝试测试 Firebase 以允许用户使用 push 发布 cmets。我想用以下内容显示我检索到的数据；

fbl.child('sell').limit(20).on("value", function(fbdata) { 
  // handle data display here
}

问题是数据按从旧到新的顺序返回 - 我希望它以相反的顺序。 Firebase 可以做到这一点吗？

Answer 1

以相反的顺序打印

让我们跳出框框思考...如果您的信息将直接打印到用户的屏幕上（没有任何需要按连续顺序修改的内容，例如总和什么的），只需从下到上打印即可。

因此，不要将每个新内容块插入到打印空间的末尾 (A += B)，而是将该块添加到开头 (A = B+A)。

如果您将元素作为连续的有序列表包含在内，那么如果您将每个元素作为列表项 (<li>) 插入有序列表 (<ol>) 中，则 DOM 可以为您放置数字。

这样可以节省数据库空间，避免不必要的反向数据。

Answer 2

对我来说，是limitToLast 起作用了。我还发现limitLast 不是函数:)

const query = messagesRef.orderBy('createdAt', 'asc').limitToLast(25);

以上对我有用。

Answer 3

自从编写此答案以来，Firebase 添加了一项功能，允许按任何子项或按值进行排序。所以现在有四种方式来对数据进行排序：按键、按值、按优先级或按任何命名子项的值。看到这个blog post that introduces the new ordering capabilities。

但基本方法保持不变：

1.添加具有倒置时间戳的子属性，然后对其进行排序。

2.按升序读取子项，然后在客户端上反转它们。

Firebase 支持以两种方式检索集合的子节点：

• 按名称
• 按优先级

你现在得到的是名字，它恰好是按时间顺序排列的。顺便说一句，这绝非巧合：当您push 将一个项目放入集合时，会生成名称以确保以这种方式对子项进行排序。引用Firebase documentation for push：

push() 生成的唯一名称以客户端生成的时间戳为前缀，以便生成的列表按时间顺序排序。

Firebase guide on ordered data 对这个话题有这样的看法：

数据是如何排序的

默认情况下，Firebase 节点上的子节点按名称按字典顺序排序。使用push() 可以生成按时间顺序自然排序的子名称，但许多应用程序要求它们的数据以其他方式排序。 Firebase 允许开发人员通过为每个项目指定自定义优先级来指定列表中项目的顺序。

获得所需行为的最简单方法是在添加项目时还指定一个始终递减的优先级：

var ref = new Firebase('https://your.firebaseio.com/sell');
var item = ref.push();
item.setWithPriority(yourObject, 0 - Date.now());

更新

您还必须以不同的方式检索孩子：

fbl.child('sell').startAt().limitToLast(20).on('child_added', function(fbdata) {
  console.log(fbdata.exportVal());
})

在我使用on('child_added' 的测试中，确保最后添加的几个孩子按时间倒序返回。另一方面，使用on('value'，按名称顺序返回它们。

请务必阅读section "Reading ordered data"，它解释了使用child_* 事件来检索（有序）子级。

一个 bin 来证明这一点：http://jsbin.com/nonawe/3/watch?js,console

Answer 4

myarray.reverse();或 this.myitems = items.map(item => item).reverse();

Answer 5

我也遇到了这个问题，我找到了一个非常简单的解决方案，无论如何都不涉及操纵数据。如果您要将结果呈现给 DOM，则在某种列表中。您可以使用 flexbox 并设置一个类来反转其容器中的元素。

.reverse {
  display: flex;
  flex-direction: column-reverse;
}

Answer 6

为了补充 Dave Vávra 的答案，我使用负时间戳作为我的 sort_key，就像这样

设置

const timestamp = new Date().getTime();
const data = {
  name: 'John Doe',
  city: 'New York',
  sort_key: timestamp * -1 // Gets the negative value of the timestamp
}

获取

const ref = firebase.database().ref('business-images').child(id);
const query = ref.orderByChild('sort_key');
return $firebaseArray(query); // AngularFire function

这会从最新到最旧的顺序获取所有对象。你也可以$indexOnsortKey让它运行得更快

Answer 7

只需在数组上使用reverse()，假设您将值存储到数组items[] 然后执行this.items.reverse()

 ref.subscribe(snapshots => {
       this.loading.dismiss();

      this.items = [];
      snapshots.forEach(snapshot => {

        this.items.push(snapshot);

      });
      **this.items.reverse();**
    },

Answer 8

您可以添加一个名为 orderColumn 的列来节省时间

Long refrenceTime = "large future time"; Long currentTime = "currentTime"; Long order = refrenceTime - currentTime;

现在在名为 orderColumn 的列中以及检索数据时保存长订单 作为 orderBy(orderColumn) 你会得到你需要的。

Answer 9

有人指出有两种方法可以做到这一点：

1. 在客户端操作数据
2. 进行对数据进行排序的查询

我发现最简单的方法是使用选项 1，但通过 LinkedList。我只是将每个对象附加到堆栈的前面。它足够灵活，仍然允许在ListView 或RecyclerView 中使用列表。这样，即使它们按从旧到新的顺序排列，您仍然可以查看或检索最新到旧的。

Answer 10

在 Android 中，有一种方法可以通过适配器实际反转对象 Arraylist 中的数据。在我的情况下，我无法使用 LayoutManager 以降序反转结果，因为我使用水平 Recyclerview 来显示数据。将以下参数设置为 recyclerview 会破坏我的 UI 体验：

llManager.setReverseLayout(true);
llManager.setStackFromEnd(true);

我发现的唯一工作方法是通过 RecyclerView 适配器的 BindViewHolder 方法：

@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, int position) {
    final SuperPost superPost = superList.get(getItemCount() - position - 1);
}

希望这个答案能帮助所有在 Firebase 中遇到此问题的开发人员。

Answer 11

确实没有办法，但似乎我们有 recyclerview 我们可以拥有这个

 query=mCommentsReference.orderByChild("date_added");
        query.keepSynced(true);

        // Initialize Views
        mRecyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
        mManager = new LinearLayoutManager(getContext());
//        mManager.setReverseLayout(false);
        mManager.setReverseLayout(true);
        mManager.setStackFromEnd(true);

        mRecyclerView.setHasFixedSize(true);
        mRecyclerView.setLayoutManager(mManager);

Answer 12

我是通过前置来做到这一点的。

query.orderByChild('sell').limitToLast(4).on("value", function(snapshot){
    snapshot.forEach(function (childSnapshot) {
        // PREPEND
    });
});

Answer 13

我使用 ReactFire 来轻松集成 Firebase。

基本上，它可以帮助我将数据以array 的形式存储到组件状态中。然后，我只需要使用reverse() 函数（read more）

我是这样实现的：

import React, { Component, PropTypes } from 'react';
import ReactMixin from 'react-mixin';
import ReactFireMixin from 'reactfire';

import Firebase from '../../../utils/firebaseUtils'; // Firebase.initializeApp(config);

@ReactMixin.decorate(ReactFireMixin)
export default class Add extends Component {
    constructor(args) {
        super(args);

        this.state = {
            articles: []
        };
    }

    componentWillMount() {
        let ref = Firebase.database().ref('articles').orderByChild('insertDate').limitToLast(10);
        this.bindAsArray(ref, 'articles'); // bind retrieved data to this.state.articles
    }

    render() {
        return (
            <div>
                {
                    this.state.articles.reverse().map(function(article) {
                        return <div>{article.title}</div>
                    })
                }
            </div>
        );
    }
}

Answer 14

您正在搜索 limitTolast(Int x) 。这将为您提供数据库中最后“x”个较高的元素（它们按升序排列），但它们是“x”个较高的元素

如果您进入数据库 {10,300,150,240,2,24,220}

这个方法：

myFirebaseRef.orderByChild("highScore").limitToLast(4)

将检索您：{150,220,240,300}

Answer 15

有更好的方法。您应该按负服务器时间戳排序。即使离线也如何获得负服务器时间戳？有一个隐藏的字段可以提供帮助。文档中的相关sn-p：

var offsetRef = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/.info/serverTimeOffset");
  offsetRef.on("value", function(snap) {
  var offset = snap.val();
  var estimatedServerTimeMs = new Date().getTime() + offset;
});

Answer 16

我有一个日期变量（长），并希望将最新项目保留在列表顶部。所以我所做的是：

• 添加新的长字段“dateInverse”
• 添加一个名为“getDateInverse”的新方法，它只返回：Long.MAX_VALUE - 日期；
• 使用以下命令创建我的查询：.orderByChild("dateInverse")
• 快！ :p

Answer 17

从 firebase 2.0.x 开始，您可以使用 limitLast() 来实现：

fbl.child('sell').orderByValue().limitLast(20).on("value", function(fbdataSnapshot) { 
  // fbdataSnapshot is returned in the ascending order
  // you will still need to order these 20 items in
  // in a descending order
}

这是公告的链接：More querying capabilities in Firebase

Answer 18

Firebase：如何以相反的顺序显示一个项目线程，每个请求都有一个限制和一个“加载更多”按钮的指示器。

• 这将获得列表的最后 10 项

FBRef.child("childName") .limitToLast(loadMoreLimit) // 例如 loadMoreLimit = 10

• 这将获得最后 10 个项目。获取列表中最后一条记录的 id 并保存以加载更多功能。接下来，将对象集合转换为数组并执行 list.reverse()。

• LOAD MORE 功能：下一个调用将做两件事，它将根据第一个请求的引用 id 获取下一个列表项序列，并在您需要显示“加载更多“ 按钮。

this.FBRef .child("childName") .endAt(null, lastThreadId) // 从上一步得到这个 .limitToLast(loadMoreLimit+2)

• 您需要删除此对象集合的第一项和最后一项。第一项是获取此列表的参考。最后一项是显示更多按钮的指示器。

• 我还有很多其他的逻辑可以让一切保持干净。您只需要为加载更多功能添加此代码。

    list = snapObjectAsArray;  // The list is an array from snapObject
    lastItemId = key; // get the first key of the list
  
    if (list.length < loadMoreLimit+1) {
      lastItemId = false; 
    }
    if (list.length > loadMoreLimit+1) {
      list.pop();
    }
    if (list.length > loadMoreLimit) {
      list.shift();
    }
    // Return the list.reverse() and lastItemId 
    // If lastItemId is an ID, it will be used for the next reference and a flag to show the "load more" button.
  }
  

Answer 19

为了增加弗兰克的回答，也可以通过简单地使用 endAt().limit(x) 像这样 demo：

var fb = new Firebase(URL);

// listen for all changes and update
fb.endAt().limit(100).on('value', update);

// print the output of our array
function update(snap) {
   var list = [];
    snap.forEach(function(ss) {
       var data = ss.val();
       data['.priority'] = ss.getPriority();
       data['.name'] = ss.name();
       list.unshift(data); 
    });
   // print/process the results...
}

请注意，即使多达 1000 条记录（假设有效负载很小），这也是相当高效的。对于更强大的用法，Frank 的答案是权威且更具可扩展性的。

还可以通过监视child_added/child_removed/child_moved 事件代替value 并使用debounce 应用等操作来优化这种蛮力以处理更大的数据或更多记录DOM 批量更新，而不是单独更新。

DOM 更新自然而然，不管采用哪种方法，一旦您进入数百个元素，那么 debounce 方法（或 React.js 解决方案，本质上是一个 uber debounce）是一个很好的工具.