使用带有ajax的无限滚动jQuery插件

我正在做一个类似于谷歌阅读器的项目。我正在使用无限滚动jQuery插件，其工作方式与查看默认选定类别（在可滚动div中）的内容时的广告完全相同。但是，当选择另一个类别（或Google Reader的文件夹）时，该类别的内容将ajax加载到与上面相同的div容器中（基本上与Google Reader完全相同）并向下滚动到第2页，因此会出现问题将移动到之前选择的任何页面+1，而不是从选择新类别时开始。我认为基本上我需要一种方法来在选择新类别时重置插件。任何帮助非常感谢。

已邀请:

4 个回复

念炯

我意识到这是一个非常普遍的问题。我希望找到一个做过类似事情的人。无论如何，这可能不是最佳的，但我这样解决了。我将这个函数添加到插件中，可以从插件的外部调用：

this.resetPlugin = function() {
  $(document).unbind('retrieve.infscr',kickOffAjax);
  props.currPage = 1;
};

我像这样加载插件

window.infinitescroll = $('#content').infinitescroll({usual settings});

当我选择另一个类别时，我可以重置它：

window.infinitescroll.resetPlugin();

逆捐凶撤小

你的回答对我不起作用。这是我做的：您必须为InfiniteScroll的重新实例设置两个变量才能工作。你还必须重新绑定它。这是代码：

$('#myContainer').infinitescroll('destroy'); // Destroy

// Undestroy
$('#myContainer').infinitescroll({                      
    state: {                                              
        isDestroyed: false,
        isDone: false                           
}
});

InitInfiniteScroll(); // This is a wrapper for the standard initialization you need

// Re-initialize
$('#myContainer').infinitescroll('bind');

挂帘妈乡

只有这对我有用，可能这个解决方案已经过时了： jquery无限滚动“重置”

贡炮逗握惫

如果有人遇到类似的问题，只想为我的答案做出贡献。

var off = 0;
var infinite = {};


function loadMorePosts(cat, offset){
            //FUNKY AJAX LOAD
}


function initInfinite(){
    infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onBeforePageLoad: function() {
        console.log(off);
        var cat = $('.f-categories').val();
        loadMorePosts(cat, off);
        off += 5;
      },
      onAfterPageLoad: function(){
        //console.log($.noop);
      }
    });
}
initInfinite();

$(function() {
    $('.f-categories').change(function(){
        var cat = $(this).val();
        off = 0;
        infinite.destroy();
        $('.grid').html('');
        initInfinite();
        loadMorePosts(cat,off);
    });
});

要回复问题请先登录或注册

使用带有ajax的无限滚动jQuery插件

4 个回复

发起人

jquery_infinite_scroll

问题状态

使用带有ajax的无限滚动jQuery插件

与内容相关的链接

4 个回复

发起人

jquery_infinite_scroll

问题状态