Javascript 无限滚动和自定义行为

我使用提供infinitescroll功能，但是插件的默认设置依赖于下一个链接的href属性来检测当前页面并ajaxily加载下一组结果

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

这是要重写的正确函数吗，如果是，我将如何从插件初始化中执行此操作，下面的代码将无法工作

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

谢谢

---

Yehia

不太熟悉无限滚动功能，因此我无法说明这是否是要覆盖的正确功能。只要看一眼就知道可能是这样

试试这个：

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

});

---

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

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

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

注意方法的后缀，

\u custombehavior

。这将是我们将传递到无限滚动的行为（即，在确定其操作时将查找的方法集合-在本例中为

retrieve\u custombehavior

）

其次，将行为后缀传递到infinite scroll的构造函数中：

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

---

这会导致“无限滚动”在到达页面末尾时运行自定义行为（并调用检索方法）

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

（函数（$，未定义）{
$.extend（$.infinitescroll.prototype{
_setup\u loadOffers:function infscr\u setup\u loadOffers（）{
var opts=this.options，
实例=此；
//绑定要检索的下一个选择器链接
$（'a.btn-seemore-offers'）。单击（函数（e）{
retrieve（）；
});
},
});
})（jQuery）；
$（“#container”）.infinitescroll（{behavior:'loadOffers'，}）

您可以尝试从头开始编写，而不用使用库。你所需要的只是决定你的单元格（页面），它将在屏幕的末尾一个接一个地加载。您可以将它们的

offset（）.top

值存储在javascript中。然后您需要一个将在每个滚动上运行的

pageRecognition（）

方法。在该方法中，您在

pageCluster

列表上运行，该列表包含一个具有页面索引的字典，它是

offset（）。top

值。 您可以比较页面的window.scrollTop（）和这些offset.top（）值，以识别哪个页面在上面

这样，您就不需要跟踪任何库中的任何更新。在专业水平上，这也是推荐的

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