Meteorjs实现Infinite Scroll，先显示最新数据

Question

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

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

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

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

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: 
  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);

结果： 滚动前

结果： 滚动后

(输入的'status'依次为1,2,3,4,5,6。注意新添加的方框4,5,6,on图片外框 1、2、3 的顶部)

Answer 1

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

publish.js（服务器）

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

Meteorjs实现Infinite Scroll，先显示最新数据

To achieve Infinite Scroll in Meteorjs, showing latest data first

javascript

infinite-scroll

meteor