我从GitHub获得了一段代码。它是一个Jquery滚动分页插件。
https://github.com/andferminiano/jquery-scroll-pagination/tree/master
JAVASCRIPT
$(function(){
var count=$('#existing_campaign li').length;
$('#existing_campaign').scrollPagination({
'contentPage': '/cs_directory/helpers/campaigns_and_chats.php', // the url you are fetching the results
'contentData': {"count":count}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function(){ // before load function, you can display a preloader div
$('#loading').fadeIn();
alert($('#existing_campaign li').length);
},
'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
$('#loading').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
if ($('#existing_campaign li').length > 1000){ // if more than 100 results already loaded, then stop pagination (only for testing)
$('#nomoreresults').fadeIn();
$('#existing_campaign').stopScrollPagination();
}
}
});
// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});
我不确定为什么,但是在将contentData发送到contentPage进行处理之后,我继续获取相同的值,无论我多少次激活该函数并从contentPage添加我的列表。
我认为这是一个缓存问题,但我不确定如何清除缓存。尝试在.scrollPagination中作为选项插入,但也不起作用。
不知道我将如何度过难关。我知道可以做到这一点,我怎样才能将我的<li>
从我的内容页面分组到一点一点地显示?
文档的选项有点稀缺,所以我来这里寻找答案。希望有人可以提供一些答案。
答案 0 :(得分:1)
我遇到了同样的问题。 我在BeforeLoad事件中修改了这个更改内容数据并在afterLoad事件中递增页面,如下所示:
function initInfiniteScroll(data){
$('#my-div').scrollPagination({
'contentPage': url,
'scrollTarget': $(window),
'heightOffset': 1,
'AjaxAsync': true,
'beforeLoad': function () {
$(this).attr('contentData', data); // setting the contentData
}, ...
'afterLoad': function (loadedData) {
...
data.currentPage++; //Incrementing the page
}