3

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

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

谢谢。

耶希亚

4

4 回答 4

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

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

于 2013-11-29T01:10:55.383 回答
0

对无限滚动功能不是超级熟悉，所以我不能说这是否是要覆盖的正确功能。一看就知道大概是这样。

尝试这个：

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

});
于 2012-11-30T14:22:30.733 回答
0

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

这样，您无需关注任何库中的任何更新。在专业水平上，它也被推荐。

于 2020-10-02T07:20:22.240 回答
0

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

(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',})

于 2015-11-09T10:45:06.267 回答