javascript - Qn on jquery 插件(.scroll 分页)

标签 javascript php jquery

我这里有一段从 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> 进行分组是从我的内容页面一点一点显示出来的吗?

文档的选项有点少,所以我必须来这里寻找答案。希望有人能提供一些答案。

最佳答案

我也遇到了同样的问题。 我修正了这个问题,改变了 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

}

关于javascript - Qn on jquery 插件(.scroll 分页),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19021599/

相关文章:

javascript - 为什么点击div后形成循环?

javascript - 如何在 RubyRacer 中评估 HTML DOM 对象(如 "document")

javascript - Backbone : Collection nested in a model

javascript - 用户自定义数据表

jquery - 带选项卡的 Google 图表 - 图表区域不正确

javascript - Javascript 中的 ASP.NET MVC4 Razor。谷歌地图未加载

php - 为什么我的用户被添加到一个表而不是另一个表

php - 我应该如何处理使用 PHP 提交非常大的字符串?

php - 软删除最佳实践 (PHP/MySQL)

javascript - 在移动设备上查看时布局扭曲