与流星

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