javascript - InfiniteScroll 和自定义行为

Question

我正在使用 http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/提供无限滚动功能，但是插件的默认设置依赖于下一个链接的 href 属性来检测当前页面并 ajaxily 加载下一组结果。

我已经在自己的 javascript 对象中跟踪结果偏移量和页面大小，只希望无限滚动插件调用 window.LoadMore 函数来加载下一个结果，我检查了插件代码，看起来我应该覆盖loading.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');
            }
        });

谢谢。

叶海亚

Answer 1

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

首先，扩展infinitescroll的原型(prototype)，定义一个自定义的retrieve方法:

$.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'
});

这会导致无限滚动在到达页面末尾时运行您的自定义行为(并调用 retrieve 方法)