Javascript 使用jquery航路点连续滚动

我正试图遵循这一点来创建一种无限滚动技术。在我的示例代码中，为什么它不起作用？我想模拟每次到达底部时都会加载内容。目前它只起到有限的作用

看完文档后，我认为我没有正确地刷新。我怀疑枪没有开火。我不知道如何使它工作

在我的示例中，我通过调用附加更多div的getMore（）函数来模拟加载的新内容。我想达到的效果，页面永远不会结束

请参见：

HTML:

<div class="viewport">
    <div class="viewport-content">
        <div id="messages">
            <p>Some text here.</p>
            <p>Some text here.</p>
            <p>Some text here.</p>
            <p>Some text here.</p>
        </div>
        <div id="waypoint"></div>
    </div>
</div>

$(document).ready(function() {

    var pageId=0;
    $("#waypoint").waypoint(function(direction) {
        if (direction === 'down') {
            getMore(++pageId);
        }
    }, {
        context: '.viewport .viewport-content',
        offset: 'bottom-in-view'
    });

    function getMore(myPageId) {
        console.log("Loading page " + myPageId);
        for (var i=1; i<11; i++) {
            $("#messages").append("<p>Page " + myPageId + ". Row " + i + ".</p>");
        }

        $.waypoints('refresh');
    }
});

这里有一些文字

这里有一些文字

这里有一些文字

这里有一些文字

Javascript:

<div class="viewport">
    <div class="viewport-content">
        <div id="messages">
            <p>Some text here.</p>
            <p>Some text here.</p>
            <p>Some text here.</p>
            <p>Some text here.</p>
        </div>
        <div id="waypoint"></div>
    </div>
</div>

$(document).ready(function() {

    var pageId=0;
    $("#waypoint").waypoint(function(direction) {
        if (direction === 'down') {
            getMore(++pageId);
        }
    }, {
        context: '.viewport .viewport-content',
        offset: 'bottom-in-view'
    });

    function getMore(myPageId) {
        console.log("Loading page " + myPageId);
        for (var i=1; i<11; i++) {
            $("#messages").append("<p>Page " + myPageId + ". Row " + i + ".</p>");
        }

        $.waypoints('refresh');
    }
});

$（文档）.ready（函数（）{
var-pageId=0；
$（“#航路点”）。航路点（功能（方向）{
如果（方向==‘向下’）{
getMore（++pageId）；
}
}, {
上下文：'.viewport.viewport内容'，
偏移量：“视图中的底部”
});
函数getMore（myPageId）{
console.log（“加载页面”+myPageId）；
对于（var i=1；i我想做同样的事情，并结束了从航路点到靶场的切换：


所以你可以这样做：

var myPageId = 1;
function getMore(e)
{
  for (var i=1; i<11; i++)
  {
    $("#messages").append("<p>Page " + myPageId + ". Row " + i + ".</p>");
  }
  myPageId++;
}

$('#waypoint').bind('enterviewport', getMore ).bullseye();

var myPageId=1；
函数getMore（e）
{
for（var i=1；i成功地实现了这一点。我想我应该在这里分享它

我使用了jQuery航路点3.1.1

$(document).ready(function() {
    var pageId=0;
    var waypoint = new Waypoint({
        element: $("#waypoint"),
        handler: function(direction) {
            if (direction === 'down') {
                getMore(++pageId);
                Waypoint.refreshAll();
            }
        },
        offset: 'bottom-in-view'
    });

    function getMore(myPageId) {
        console.log("Loading page " + myPageId);
        for (var i=1; i<11; i++) {
            $("#messages").append("<p>Page " + myPageId + ". Row " + i + ".</p>");
        }
    }
});

$（文档）.ready（函数（）{
var-pageId=0；
var航路点=新航路点({
要素：$（“#航路点”），
处理程序：函数（方向）{
如果（方向==‘向下’）{
getMore（++pageId）；
航路点刷新全部（）；
}
},
偏移量：“视图中的底部”
});
函数getMore（myPageId）{
console.log（“加载页面”+myPageId）；
对于（var i=1；iTake a look:我会看一看的。谢谢你的建议。hi@medokr只是想看看你是否最终解决了它？我面临着一个类似的问题。hi@Slay，不幸的是没有。我决定不使用这个工具，因为它无法工作。@medokr感谢你的回复。设法让它工作。请查看我发布的解决方案。）低。希望在未来的项目中有所帮助。：这里有一个JSFIDLE，但是每次向下滚动时getMore（）会被调用1000多次，如何限制这一点，使getMore（）在航路点下的每个滚动只被调用一次？如果您注释掉
waypoint.refreshAll（）
getMore（）只调用一次，但向下滚动时刷新速度非常缓慢：hi@GiantElk刚刚看到您的响应。您是否仍在寻找解决方案？