使用 Meteor 无限滚动

Question

我试图每次只加载 12 个项目，直到用户一直向下滚动并加载另外 12 个元素

由于某种原因我的代码不起作用。当我上传另一个项目时，我可以在管理面板中看到它，因此它已成功上传，但我在普通用户视图中看不到它。我只能查看前 12 个上传的项目，并且当我滚动时它不会加载更多项目。

这是我在客户端的代码

if (Meteor.isClient) {

    var ITEMS_INCREMENT = 12; //this one refers to the number of elements to load
    Session.setDefault('itemsLimit', ITEMS_INCREMENT);
    Deps.autorun(function() {
        Meteor.subscribe('items', Session.get('itemsLimit'));
    });

    Template.list_products.helpers({
        applications: function () {
            var limit = Session.get("itemsLimit");

            //return Products.find({}, { sort: {createdAt: -1},limit: limit }); // render latest first

            return Products.find({}, { sort: {createdAt: 1},limit: limit }); // render first first
        }
    });

    Template.list_products.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 Products.find({}, { sort: {createdAt: -1},limit: limit });
    }

    // 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("itemsLimit",
                    Session.get("itemsLimit") + ITEMS_INCREMENT);
            }
        } else {
            if (target.data("visible")) {
                // console.log("target became invisible (below viewable arae)");
                target.data("visible", false);
            }
        }
    }

    // The below line is to run the above func every time the user scrolls
    $(window).scroll(showMoreVisible);
}

Answer 1

这是我如何解决的：

if(Meteor.isClient) {
  Session.set("itemsLimit", 9); // to set the limit to 9

  lastScrollTop = 0;

  $(window).scroll(function(event){
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { // to detect scroll event
      var scrollTop = $(this).scrollTop();

      if(scrollTop > lastScrollTop){ // detect scroll down
        Session.set("itemsLimit", Session.get("itemsLimit") + 9); // when it reaches the end, add another 9 elements
      }

      lastScrollTop = scrollTop;
    }
  });
}

现在它就像一个魅力:)