jquery - 是否有带有加载更多按钮的无限滚动插件？

Question

我在哪里可以获得无限滚动插件，它有一个在加载更多帖子之前单击的按钮？

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

Answer 1

从jQuery 无限滚动插件的文档页面：

在 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

使用当前版本的无限滚动插件（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 参数控制查询的偏移量以提取您想要的项目，那么 .loading URL 将在每次调用时附加下一组项目。

当然，您可以创建一个独特的 AJAX 页面，该页面仅返回下一组项目的 HTML 片段，但根据您的架构，它涉及的内容更多一些。但是，这样做可以节省带宽/执行时间。

Answer 4

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

Answer 5

当前的无限滚动 v3.0.6 接受手册中所述的“单击按钮开始加载”按钮

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

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();
});