Question

我正在使用PHP（后端服务页面）将存储在MySQL中的推文结果作为json。现在数据已经变大了，我想在页面中只加载20条推文，当用户滚动时，我希望得到更多的结果。

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

我搜索这样的东西但找不到任何详细的解决方案。

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

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

Answer 1

如果 DOM 中有更改，则必须绑定 jscroll ，因此，您可以创建一个函数，您可以在文档就绪之后以及每个ajax请求之后调用它。

请记住，Jscroll需要下一个选择器网址。所以你必须将锚点与下一个网址放在你的页面上。

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>

现在你可以为班级调用Jscroll＆＃34;主选择器＆＃34;如下

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

 }

现在最初和每次ajax请求后调用 setScrolling（＆＃39; .main-selector＆＃39;）

请记住以一种始终是下一个网址的方式设置 nextSelector 。

Answer 2

您想要创建一个javascript函数，它是一个ajax调用，用于获取下一组结果。然后将事件附加到滚动函数，计算位置，如果它在某个参数范围内，则调用javascript函数。

我将当前结果数存储在隐藏的输入字段中。

<强> HTML

<input type="hidden" name="start_from" id="start_from" value="0">
<div id="tweet_results"></div>

<强> JS

function get_results () {
  var start_from = $('#start_from').val();

  // ajax function here and pass it the start_from data
  // on complete, update the $('#start_from') value to whatever you want (+20)
  // and update $('#tweet_results) with your data from the ajax call
}


$(window).scroll(function() {
 if($(window).scrollTop() + $(window).height() >= ($(document).height() - 200)) {
   get_results ();
 }
});

在初始页面加载时，您想要调用get_results（）一次以启动它。这一切都非常粗糙，但它应该给你一个想法。

如何使用jQuery.ajax和jScroll与PHP来创建无限滚动页面

2 个答案: