是否有一个带有更多按钮的无限滚动插件？

Question

嗨，有谁知道在哪里可以获得无限滚动插件，在你加载更多帖子之前有一个你点击的按钮？

这就是我要找的东西（看右下角的更多按钮）

Answer 1

来自jQuery无限滚动插件的documentation page：

  

在1.4中，您可以触发加载下一页内容   将。您将首先取消绑定默认行为。然后触发   随时随地拉。

// unbind normal behavior. needs to occur after normal infinite scroll setup.
$(window).unbind('.infscr');
// call this whenever you want to retrieve the next page of content
// likely this would go in a click handler of some sort
$(document).trigger('retrieve.infscr');

它应该可以解决你的问题。

Answer 2

使用当前版本的Infinite Scroll Plugin（2.1.0），您可以在加载元素时暂停，然后继续并检查是否应该在按钮点击（或其他任何内容）上加载新内容：

$('.container').infinitescroll({
        // infinite scroll options
    },
    function(){
        // pause when new elements are loaded
        $('.container').infinitescroll('pause')
    }
);

function resume_infinite_scroll(){
    // resume
    $('.container').infinitescroll('resume')
    // check if new elements should be loaded
    $('.container').infinitescroll('scroll')
}

然后

<button onclick="resume_infinite_scroll()">load more</button>

Answer 3

如果您正在寻找无限滚动，这是一回事，但只需更多按钮就不需要插件。

HTML

<div id="items">
    <!-- Run your query using the page parameter to offset items, then display the items here -->
</div>
<button id="more">More</button>

JS

var page = 0;
$('#more').click(function(){
    page++;
    $('<div/>').appendTo('#items').load('the/same/url/?page='+page+' #items');
});

.load 函数将对提供的URL进行AJAX调用，而可选的选择器只会拉出该特定匹配项。在这种情况下，如果显示页面的？page参数控制查询的偏移量以提取您想要的项目。那么每次调用URL时，加载URL将附加下一组项目。

当然，您可以创建一个唯一的AJAX页面，它只返回下一组项目的HTML片段，但根据您的体系结构，它会更复杂一些。但是，您可以通过这样做来节省带宽/执行时间。

Answer 4

基本上你的身体应该有css 溢出：滚动，更多的按钮应该使用jquery追加更多html到你的容器Div - http://api.jquery.com/append/

Answer 5

当前的无限滚动v3.0.6接受manual

中所述的“单击按钮以开始加载”按钮

这允许页面末尾的按钮开始无限滚动。

var $container = $('.container').infiniteScroll({
  // options...
  // disable loading on scroll
  loadOnScroll: false,
});

var $viewMoreButton = $('.view-more-button');
$viewMoreButton.on( 'click', function() {
  // load next page
  $container.infiniteScroll('loadNextPage');
  // enable loading on scroll
  $container.infiniteScroll( 'option', {
    loadOnScroll: true,
  });
  // hide button
  $viewMoreButton.hide();
});