html Shopify无限滚动

Posted 2021-05-11

var Scroll = (function($, doc, win) {

  var options = {};
  var inprog = false;
  var currPos = 0;
  var maxPos = 0;

  function getNextPage() {
    options.ajaxData['page'] = options.page;
    options.page += 1;
    
    return $.ajax(this.url, {
      data: options.ajaxData
    });
  }
  
  function loadMore() {
    getNextPage().done(function(data) {
      $(options.container).append(data);
      inprog = false;
    });
  }
  
  return function(data) {
    options.page = data.page || 2;
    options.offset = data.offset || 100;
    options.container = data.container || '.scroll-container';
    options.url = data.url;
    options.ajaxData = data.ajaxData;

    var $doc = $(doc);
    var $win = $(win);
    
    $doc.scroll(function(){
      currPos = $doc.scrollTop()+$win.height();
      maxPos = $doc.height()-options.offset;
      
      if(currPos>=maxPos && inprog===false) {
        inprog = true;
        loadMore();
      }
    });
  }
  
})($, document, window);


// Example usage
Scroll({
  url: '/blogs/news',
  ajaxData: { view: 'blog-ajax' },
  offset: 500
});

<!-- 
    a new template will need to be created for this file then this will 
    be what's called from the ajax by sending it with a property of 
    view:*template name*.
-->
{% layout none %}

{% paginate items by 5 %}
  {% for item in items %}
	<!-- item html -->
  {% endfor %}
{% endpaginate %}