Question

我正在做一个类似于谷歌阅读器的项目。

我正在使用无限滚动jQuery插件，它与查看默认选定类别（在可滚动div中）的内容完全一样。

然而，当选择另一个类别（或Google Reader的情况下的文件夹）时，该类别的内容将ajax加载到与上面相同的div容器中（基本上与Google Reader完全相同）并向下滚动到第2页问题因为它将移动到之前选择的任何页面+1，而不是从选择新类别时开始。

我认为基本上我需要一种方法来在选择新类别时重置插件。非常感谢任何帮助。

Answer 1

我意识到这是一个非常普遍的问题。我希望找到一个做过类似事情的人。

无论如何，这可能不是最佳的，但我解决了这个问题。

我将此函数添加到插件中，可以从插件外部调用：

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

我像这样加载插件

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

我可以在选择其他类别时重置它：

window.infinitescroll.resetPlugin();

Answer 2

你的回答对我不起作用。这是我做的：

你必须为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');

Answer 3

只有这对我有用，可能这个解决方案已经过时了：

jquery infinite scroll "reset"

Answer 4

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

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 个答案: