无限滚动和自定义行为

InfiniteScroll and Custom Behavior

本文关键字：自定义 滚动 无限      更新时间：2023-09-26

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

我已经在自己的javascript对象中跟踪结果偏移量和页面大小，只想让infinitescroll插件调用窗口。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');
            }
        });

谢谢。

Yehia

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

首先，扩展了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'
});

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

我对无限滚动函数不太熟悉，所以我不知道这是否是要覆盖的正确函数。只要看一眼就知道可能是。

试试这个：

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

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

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

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

通过这种方式，您不需要遵循任何库中的任何更新。在专业水平上，这也是推荐的。

相关文章：