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

- Behrouz Riahi

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

现在它完美地运行了 :)

- Behrouz Riahi

Answer 2

你可以这样实现：

HTML文件:

<template name="yourTemplateName">
   <div id="divId">
      {{#each dataArr}}
         //your view here.
      {{/each}}
   </div>
  {{#if noMoreItem}}
  <span>No more items to show</span>
  {{/if}}
</template>

JS文件:

var pageNumber = new ReactiveVar(0);
var noMoreItem = new ReactiveVar(false);
var mainContainer = // Your element here example: document.getElementById('divId')
mainContainer.addEventListener('scroll', function(){
    if(mainContainer.scrollHeight - mainContainer.scrollTop === mainContainer.clientHeight) {
        getMoreItems();
    }
});
var getMoreItems = function () {
   if(pageNumber.get() < Math.floor(Counts.get('countItems')/12)) {
      pageNumber.set(Number(pageNumber.get())+1);
      Meteor.subscribe('pubName', pageNumber.get(), 12);
  } else {
     noMoreItem.set(true);
  }
}

Template.yourTemplateName.rendered = function () {
   pageNumber.set(0);
   Meteor.subscribe('pubName', pageNumber.get(), 12);
}

Template.yourTemplateName.helpers({
   'dataArr': function () {
      return CollectionName.find();
   },
  'noMoreItem': function () {
      return noMoreItem.get();
   }
})

出版物:

Meteor.publish("pubName", function (pageNumber, pageSize) {
   Counts.publish(this, 'countItems', Meteor.users.find(filter), {
      noReady: true
   });
   return CollectionName.find({}, {
      skip: pageNumber > 0 ? ((pageNumber) * pageSize) : 0,
      limit: pageSize
   })
});

- Sapna

---

抱歉回复晚了，我在海外。我之前尝试过使用Pages，但没有成功。我正在使用Mongo.Collection来存储属性，并且我的集合中已经有数据了。是否可以使用它来实现无限滚动？ - Behrouz Riahi

是的，我也用了同样的方法，对我来说很有效。但是它在服务器端处理时没有起作用。为此，您可以创建自定义的方法。如果您需要自定义的方法，我可以帮助您完成。 - Sapna

好的。我会更新我的回答并让你知道。除了上面列出的内容之外，你还有其他任何要分享的需求吗？ - Sapna

目前我只在实现无限滚动功能，其他功能我会自己完成并且如果遇到任何问题无法理解或解决，我会发布相关问题。 - Behrouz Riahi

@BehrouzRiahi 我已经更新了我的答案，请看一下。我提供了一个通用的答案，请根据自己的集合和视图使用。如果有任何疑问，请告诉我。 - Sapna