php - 如何使用 jQuery.ajax 和 jScroll 与 PHP 制作无限滚动页面

Question

我正在使用 PHP(后端服务页面)获取以 json 格式存储在 MySQL 中的推文结果。 现在数据变大了，我只想在页面中加载 20 条推文，当用户滚动时，我想获得更多结果。

我是 jQuery 的新手，因为 jScroll 几乎没有文档，如果有的话，我无法让这个东西工作。

我搜索了类似的内容，但找不到任何详细的解决方案。

我的 PHP 服务只获取少量记录。我知道如何设置偏移量，但如何发送它并同时在页面上实现 jScroll？!

有人可以帮忙吗？ 非常感谢......

Answer 1

如果DOM发生变化，你必须绑定(bind)jscroll， 所以你可以创建一个函数，在文档准备好后和每个 ajax 请求后调用。

记住 Jscroll 需要下一个选择器 url。因此，您必须将带有下一个 url 的 anchor 放置到您的页面。

HTML 部分应该是这样的，

<div class="main-selector">
 <div><!--Your data here --> </div>
 <div><!--Your data here -->  </div>
 <div><!--Your data here  --> </div>
 <div><!--Your data here -->  </div>
 <div><!--Your data here  --> </div>
 <div class='pager'>
    <a href="URL TO NEXT PAGE" class='next-selector'></a>
 </div>
</div>

现在你可以像下面这样为“main-selector”类调用Jscroll

 function setScrolling(selector) {
    $(window).unbind("scroll");


    scroller= $(selector).jscroll({
        loadingHtml: '<img src="/images/loader.gif" alt="Loading" /> Loading...',
        padding: 20,
        nextSelector:' next-selector:last ' // This part is tricky
    });

 }

现在调用 setScrolling('.main-selector') ，在每个 ajax 请求开始和之后(仅在需要时)

并记住以始终是下一个 url 的方式设置 nextSelector。