InfiniteScroll 和自定义行为答案

【问题标题】：InfiniteScroll and Custom BehaviorInfiniteScroll 和自定义行为
【发布时间】：2012-01-10 00:39:06
【问题描述】：

我使用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');
            }
        });

谢谢。

是啊

【问题讨论】：

标签： javascript jquery jquery-plugins infinite-scroll

【解决方案1】：

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

首先，扩展无限滚动的原型，并定义一个自定义的检索方法：

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

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

【讨论】：

【解决方案2】：

对无限滚动功能不是很熟悉，所以我无法谈论这是否是要覆盖的正确功能。一看就知道可能是这样。

试试这个：

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

});

【讨论】：

【解决方案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',})

【讨论】：

【解决方案4】：

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

通过这种方式，您无需关注任何库的任何更新。在专业层面上，也值得推荐。

【讨论】：