无限滚动分页的问题

时间:2019-04-01 19:05:10

标签: javascript

我在shopify上有一个分页,我试图使用javascript / ajax使无限滚动工作。 液体看起来像这样: {分页收集的百分比。产品乘以20%}     

<!-- START PRODUCTS -->
{% for product in collection.products %}
        <!-- START PRODUCT {{ forloop.index | plus:paginate.current_offset }} -->
        <div class="product" id="product-{{ forloop.index | plus:paginate.current_offset }}">
            {% include 'product' with product %}
        </div> 
        <!-- END PRODUCT {{ forloop.index | plus:paginate.current_offset }} -->
{% endfor %}

{% if paginate.next %}
    <div id="more"><p>&darr; <a href="{{ paginate.next.url }}">More</a></p></div>        
{% endif %}

<div id="product-list-foot"></div>
<!-- END PRODUCTS -->

<!-- the bottom of your collections.liquid -->
{% endpaginate %}

还有JS:

<script>
         function ScrollExecute() {
           if($(document).height() - 100 < ($(document).scrollTop() + $(window).height())) {
               scrollNode = $('#more').last();
               scrollURL = $('#more p a').last().attr("href");
               if(scrollNode.length > 0 && scrollNode.css('display') != 'none') {
                   $.ajax({
                       type: 'GET',
                       url: scrollURL,
                       beforeSend: function() {
                           scrollNode.clone().empty().insertAfter(scrollNode).append('<img class="loading_gif" src=\"{{ "ajax-loader.gif" | asset_url }}\" />');
                           scrollNode.hide();
                       },
                       success: function(data) {
                           // remove loading feedback
                           scrollNode.next().remove();
                           var filteredData = $(data).find(".product");
                           filteredData.insertBefore( $("#product-list-foot") );
                       },
                       dataType: "html"
                   });
               }
           }
         }

         $(document).ready(function () {
           $(window).scroll(function(){
               $.doTimeout( 'scroll', 100, ScrollExecute);
           });
         });
</script>

这很好用,但是有一个问题。分页的第一页工作正常,但是例如,如果总共有3页,则不会加载第三页。因此,加载功能仅工作一次。 任何想法为什么这只能一次?

0 个答案:

没有答案