InfiniteScroll和自定义行为

我使用http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/来提供infinitescroll功能，但插件的默认设置依赖于下一个链接的href属性来检测当前页面并且快速加载下一组结果。InfiniteScroll和自定义行为

我已经跟踪了我自己的JavaScript对象中的结果偏移和页面大小，只是希望infinitescroll插件调用window.LoadMore函数来加载下一个结果，我检查了插件代码，看起来像我应该覆盖load.start函数（beginAjax具体），

 opts.loading.start = opts.loading.start || function() { 

      $(opts.navSelector).hide(); 
      opts.loading.msg 
       .appendTo(opts.loading.selector) 
       .show(opts.loading.speed, function() { 
        beginAjax(opts); 
      }); 
     };

这是正确的函数来覆盖？，如果是的话，我会如何做到这一点从插件初始化，下面的代码将无法正常工作

 ($('.deals-list'), this.el).infinitescroll({ 
      navSelector : "div.navigation", 
      nextSelector : "div.navigation a", 
      itemSelector : ".deal", 
      debug: true, 
      loading.start: function(){ 
       alert('testing'); 
      } 
     });

谢谢。

叶海亚

来源

2012-01-10 Yehia A.Salam

不是超级熟悉的无限滚动功能，所以我不能不管是覆盖正确的函数说话。只需一眼就可以知道。

试试这个：

($('.deals-list'), this.el).infinitescroll({ 
    navSelector : "div.navigation", 
    nextSelector : "div.navigation a", 
    itemSelector : ".deal", 
    debug: true, 
    loading: { 
     start: function(){ 
      alert('testing'); 
     } 
    } 

});

来源

2012-11-30 14:22:30

无限滚动提供自定义行为。要创建一个新的行为来解决你的特定问题，你必须做两件事。

首先，扩展infinitescroll的原型，定义自定义检索方法：

$.extend($.infinitescroll.prototype, { 
    retrieve_custombehavior: function() { 
     $('#nav > a').click(); 
    } 
});

通知方法的后缀，_custombehavior。这将是我们将传入无限滚动的行为（即，在确定它的行为时它将查找的方法集合 - 在本例中为retrieve_custombehavior）。

其次，通过行为后缀为无限滚动的构造函数：

$('.deals-list').infinitescroll({ 
    navSelector : "div.navigation", 
    nextSelector : "div.navigation a", 
    itemSelector : ".deal", 
    debug: true, 
    behavior: '_custombehavior' 
});

这将导致无限滚动运行你的自定义行为一旦到达页的结尾（和检索方法被调用）

来源

2013-11-29 01:10:55

有自定义解决方案。我使用它

(function($, undefined) { 
 
\t $.extend($.infinitescroll.prototype,{ 
 
\t \t _setup_loadOffers: function infscr_setup_loadOffers() { 
 
\t \t \t var opts = this.options, 
 
\t \t \t instance = this; 
 
\t \t \t // Bind nextSelector link to retrieve 
 
\t \t \t $('a.btn-seemore-offers').click(function(e) { 
 
\t \t \t \t instance.retrieve(); 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t }, 
 
\t }); 
 
})(jQuery); 
 
$('#container').infinitescroll({behavior: 'loadOffers',})

来源

2015-11-09 10:45:06

InfiniteScroll和自定义行为

回答

相关问题