Meteorjs实现无限滚动，先显示最新数据

Question

我已经按照这里的教程进行操作：http://www.meteorpedia.com/read/Infinite_Scrolling，结果与教程作者的预期一致，即无限滚动将集合中的第一个数据（旧）显示到最后一个（最新），从上到下。

问题是：我想实现无限滚动的地方是在新闻源中，很像在 Facebook 中找到的那个，它首先显示集合中的最新（最新）数据，当你向下滚动时，旧数据将被添加。

我曾尝试使用createdAt:-1 对数据进行倒序排序，但发生了一件有趣的事情：

刷新时，newsfeed 会显示前 3 个旧数据（因为我把 3 作为限制），然后当我向下滚动时，会在 处附加另外 3 组数据（较新而不是最新） TOP 的旧数据，并且这种模式一直持续到数据完全加载到屏幕上。我想要实现的类似于 Facebook 的 Newfeed，即新闻源在顶部显示最新/最近的数据，并且随着用户向下滚动，旧数据被调用并添加到客户端。代码如下：

statusBox.html（客户端）

<template name="statusBox">
    {{#each newsfeedList}}
    
    ..HTML template goes here..

    {{/each}}
    {{#if moreResults}}
        <div id="showMoreResults" class="text-center" style="margin-left: 25px;">
            <span class="loading"><i class="fa fa-spinner fa-pulse" aria-hidden="true"></i></span>
        </div>
    {{/if}}
</template>

publish.js（服务器）

Meteor.publish('status', function(limit){
  return Status.find({}, {limit:limit});
});

statusBox.js（客户端）

newsfeed_increment = 3;
Session.setDefault('newsfeedLimit', newsfeed_increment);
Deps.autorun(function(){
  Meteor.subscribe('status', Session.get('newsfeedLimit'));
});

Template.statusBox.helpers({
  //Merging few collections into one template helper: https://stackoverflow.com/questions/21296712/merging-collections-in-meteor
  newsfeedList: function(){
    return Status.find({},{sort:{createdAt:-1}});
  },

  ...

  //Reference for infinitescrolling: http://www.meteorpedia.com/read/Infinite_Scrolling
  moreResults: function() {
    // If, once the subscription is ready, we have less rows than we
    // asked for, we've got all the rows in the collection.
    return !(Status.find().count() < Session.get("newsfeedLimit"));
  }
});

// whenever #showMoreResults becomes visible, retrieve more results
function showMoreVisible() {
    var threshold, target = $("#showMoreResults");
    if (!target.length) return;

    threshold = $(window).scrollTop() + $(window).height() - target.height();

    if (target.offset().top < threshold) {
        if (!target.data("visible")) {
            // console.log("target became visible (inside viewable area)");
            target.data("visible", true);
            Session.set("newsfeedLimit",
                Session.get("newsfeedLimit") + newsfeed_increment);
        }
    } else {
        if (target.data("visible")) {
            // console.log("target became invisible (below viewable arae)");
            target.data("visible", false);
        }
    }
}

// run the above func every time the user scrolls
$(window).scroll(showMoreVisible);

结果： 滚动前

结果： 滚动后

(输入的“状态”依次为 1,2,3,4,5,6。注意在框 1,2,3 顶部新添加的框 4,5,6关闭图片）

Answer 1

您需要在发布功能上对结果进行排序

publish.js（服务器）

Meteor.publish('status', function(limit){
  return Status.find({}, {limit:limit, sort: {createdAt: -1}});
});