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

它现在就像一个魅力：）

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

用流星无限滚动

2 个答案: