我使用infinitescroll.js脚本,效果非常好。我已经使用以下代码了解了如何使用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();
});
然而,我想做的是允许无限滚动运行3/4次,然后显示.js-next-reports
按钮。我不确定如何跟踪无限卷轴运行了多少次。我知道有一个currPage
var但是使用console.log我不知道如何引用它。
infinitescroll还有一个maxPage
选项,限制它只运行X次,所以我可能会以某种方式进入?我不知道如何获得一个console.log的选项。这是我的初始化代码,如果有帮助($ 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.',
}
},
});
可能是这样的:?
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();
});
}
但我不知道如何计算卷轴或访问currPage
。
由于
答案 0 :(得分:3)
JSFiddle可以帮助测试代码,但是根据我在他们的文档中读到的,有一个回调允许你访问状态对象中的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');
}
}
});