无限滚动事件不触发

时间:2020-06-02 10:38:32

标签: jquery infinite-scroll jquery-isotope es6-modules

我正在使用InfiniteScroll插件(与Isotope和ImagesLoaded一起使用)将更多帖子加载到我的页面上,但是由于某些原因,“事件”似乎没有触发。

我正在将其作为ES6导出来执行,但是主要功能正常运行,因此无法理解为何request之类的单个事件无法正常工作。

任何建议,不胜感激!

export function initArticlesGrid() {

    // Setup
    var $ = require('jquery');
    var jQueryBridget = require('jquery-bridget');
    var isotope = require('isotope-layout');
    var infiniteScroll = require('infinite-scroll');
    var imagesLoaded = require('imagesloaded');

    // Init as jQuery plugin(s) 
    jQueryBridget( 'isotope', isotope, $ ); 
    jQueryBridget( 'imagesLoaded', imagesLoaded, $ );
    jQueryBridget( 'infiniteScroll', infiniteScroll, $ );

    // Vars
    var grid = $('#queried-articles');
    var articles = grid.find('article');
    var loadMoreBtn = $('#btn-load-more a');

  // Init isotope
  grid.isotope({
    itemSelector: 'article',
    layoutMode: 'fitRows',
    transitionDuration: '300',
    percentPosition: true,
    hiddenStyle: { opacity: 0 },
    visibleStyle: { opacity: 1 }
  });

  // Init infiniteScroll (only if enough articles and loadMoreBtn exists)
  if( articles.length >= 3 && loadMoreBtn.length ) {

    // Vars
    var iso = grid.data('isotope'); // Get isotope instance

    // Make imagesLoaded available for InfiniteScroll
    infiniteScroll.imagesLoaded = imagesLoaded;

    // Init infinite scroll
    grid.infiniteScroll({
      path: '#pagination #next a',
      append: '#queried-articles article',
      loadOnScroll: false,
      scrollThreshold: false,
      outlayer: iso,
      button: '#btn-load-more',
      hideNav: '#pagination',
      debug: true,
      history: false
    }); 

    /////// None of the following requests are firing
    grid.on('request.infiniteScroll', function() {
            console.log('loading');
      loadMoreBtn.text('Loading');
    });
    // Return text to default
    grid.on('load.infiniteScroll', function() {
            console.log('load');
      loadMoreBtn.text('Load More');
    });
    // Alert user that no more articles are availble
    grid.on('last.infiniteScroll', function() {
            console.log('last');
      loadMoreBtn.text('No more articles');
    });
  }
}

0 个答案:

没有答案