允许infinitescroll。js运行X次，然后加载更多的帖子

I'm using the infinitescroll.js script and it works really well. I've found out how to replace the default functionality with a load more button, using this code:

我使用infinitescroll。它运行得很好。我发现了如何用load more按钮替换默认功能，使用以下代码:

$(window).unbind('.infscr');
$('.js-next-reports').click(function() {
    $grid.infinitescroll('retrieve');
    return false;
});
$(document).ajaxError(function(e, xhr, opt) {
    if (xhr.status == 404) $('.js-next-reports').remove();
});

However, what I'd like to do is allow infinite scroll to run 3/4 times and then show the .js-next-reports button. I'm not sure how to keep track of how many times infinite scroll has run though. I know there is a currPage var but using console.log I can't work out how I can reference it.

但是，我想做的是允许无限滚动运行3/4次，然后显示.js-next报告按钮。我不知道如何跟踪无限滚动的运行次数。我知道有一个currPage var但是使用控制台。我不知道怎么引用它。

There is also a maxPage option for infinitescroll, which limits it to run only X times, so I could maybe tap into that somehow? I'm not sure how to get a console.log of the options though. Here is my init code if that helps ($grid is just a ref to a div)

对于infinitescroll，还有一个maxPage选项，它限制它只能运行X次，所以我可以利用它吗?我不知道如何得到一个控制台。但是选择日志。这是我的初始化代码($grid只是一个div的参考)

$grid.infinitescroll({

    // selector for the paged navigation (it will be hidden)
    navSelector  : ".pagination",
    // selector for the NEXT link (to page 2)
    nextSelector : ".pagination .next",
    // selector for all items you'll retrieve
    itemSelector : ".infinite-scroll-post",
    contentSelector : "#infinite-scrollable",
    debug: true,

    // finished message
    loading: {
        img: "ajax-loader.gif",
        msgText: "Loading more projects...",
        finishedMsg: 'No more pages to load.',
        }
    },

});

Maybe something like: ?

也许类似:?

if ( .currPage == "3" ) {
    $(window).unbind('.infscr');
    $('.js-next-reports').click(function() {
        $grid.infinitescroll('retrieve');
        return false;
    });
    $(document).ajaxError(function(e, xhr, opt) {
        if (xhr.status == 404) $('.js-next-reports').remove();
    });
}

But I don't know how to either count the scrolls or access currPage.

但我既不知道怎么数书卷，也不知道怎么访问当前页。

Thanks

谢谢

1 个解决方案

#1

A JSFiddle would help testing the code, but from what I've read on their documentation, there's a callback that allows you to access currPage inside the state object. Your code should look something like this:

JSFiddle可以帮助测试代码，但是从我在他们的文档中读到的内容来看，有一个回调函数允许您访问state对象中的currPage。您的代码应该如下所示:

$grid.infinitescroll({

    // selector for the paged navigation (it will be hidden)
    navSelector  : ".pagination",
    // selector for the NEXT link (to page 2)
    nextSelector : ".pagination .next",
    // selector for all items you'll retrieve
    itemSelector : ".infinite-scroll-post",
    contentSelector : "#infinite-scrollable",
    debug: true,

    // finished message
    loading: {
        img: "ajax-loader.gif",
        msgText: "Loading more projects...",
        finishedMsg: 'No more pages to load.',
    },
    appendCallback: false
    }, function(newitems, opts) {
        if(opts.state.currPage == 3) {
            $(window).unbind('.infscr');
        }
    }
});