使用 Waypoints Infinite Scroll 手动加载更多项目答案

【问题标题】：Manually load more items with Waypoints Infinite Scroll使用 Waypoints Infinite Scroll 手动加载更多项目
【发布时间】：2015-10-05 12:03:29
【问题描述】：

我正在使用 Waypoints Infinite Scroll，我想制作一个“加载更多项目”或“加载更多帖子”按钮。

我尝试过像这样使用“破坏”，但它似乎不起作用。

    $('.load-more-button').click(function(){

        var infinite = new Waypoint.Infinite({
            element: $('.infinite-container')[0],
            onAfterPageLoad: function() {
                $('.infinite-container').waypoint('destroy')
            }
        })

    });

真的卡在这里，感谢您的帮助！

【问题讨论】：

通过调用var infinite = new Waypoint.Infinite() 你正在实例化它。你到底想做什么？抱歉，我没有收到您的问题。
我只想有一个加载更多按钮，而不是自动加载项目。像这样：[链接] (jsfiddle.net/purmou/bEdfX)

标签： jquery infinite-scroll jquery-waypoints

【解决方案1】：

我知道这是 4 年前提出的，但我想我们有同样的问题。我试图让按钮触发与滚动相同的事件。我可以用这段代码做到这一点：

// Initializing Waypoint Infinite
var infinite = new Waypoint.Infinite({
    element: $('.infinite-container')[0]
});

// Listen for the click on the button, and then trigger the event
$('.infinite-more-link').on('click', function(e) {
    e.preventDefault();
    infinite.waypoint.trigger();
});

【讨论】：

【解决方案2】：

试试下面的代码：

$('.load-more-button').click(function(){
    $(".infinite-more-link").click(); //Infinite Scroll create a <a> element with "infinite-more-link" class by default for More link.
});

【讨论】：

对不起，我想我忘了提到我想点击，加载一些项目并停止。并再次单击以获取更多项目...

【解决方案3】：

有趣的是，你想拿走 Infinite 所做的一半，你还不如只编写 AJAX 加载 + 在点击时附加自己，而不使用 Waypoints。但如果你坚持：

$('.infinite-container').waypoint('destroy')

那是旧的 Waypoints 2.x 样式代码。 Destroy 和其他方法不再是 jQuery 插件的一部分。您需要使用您创建的 Waypoint 实例：

infinite.destroy()

【讨论】：