Question

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

我已经在我自己的javascript对象中跟踪结果偏移量和pagesize，只是想让infinitescroll插件调用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的原型，并定义自定义检索方法：

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

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

Answer 2

不是非常熟悉无限滚动功能所以我不能说这是否是正确的覆盖功能。只是一眼就说它可能是。

试试这个：

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

});

Answer 3

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

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

Answer 4

您可以尝试从头开始编写，而不是使用库进行工作。您所需要做的就是确定将在屏幕末尾逐一加载的单元格（页面）。并且您可以将其offset().top值存储在javascript中。然后，您将需要一个pageRecognition()方法，该方法将在每次滚动时运行。在该方法中，您在pageCluster列表上运行，该列表包含一个具有页面索引且值为offset().top的字典。您可以将window.scrollTop（）和页面的这些offset.top（）值进行比较，以识别页面在哪个页面上。

通过这种方式，您无需遵循任何库中的任何更新。在专业水平上，也建议这样做。

InfiniteScroll和自定义行为

4 个答案: