1

我有一些需要无限滚动的 UI 元素。所以我正在使用jscroll。我想在 div 结束时获取新数据。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src=js/jquery.jscroll.js></script>
<script>

$('.scrollt').jscroll(function(){
    $(".scrollt").load("/handle.php?lastdis=90");});

</script>
</head>
<body>


<?php
include_once('conn.php');

$start=0;
$query="Select * from data where id > ". $start ." Limit 90;";
$res=mysqli_query($con,$query);

echo '<div class="scrollt">';
while ($row = mysqli_fetch_array($res, MYSQL_NUM)) {
    echo "<p> ".$row[0]." &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;". $row[1]."<p><p><p>";
}

echo "</div>"

?>

</body>
</html>

所以基本上我显示一个包含 90 条记录的页面，并希望在 load() 函数中获取 91 条以上的记录。但这不起作用。

handle.php 代码

<?php
include_once('conn.php');
$goahead=$_GET['lastdis'];

$query="Select * from data where id > ". $goahead ." Limit 20;";
$res=mysqli_query($con,$query);
while ($row = mysqli_fetch_array($res, MYSQL_NUM)) {
    echo "<p> ".$row[0]." &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;". $row[1]."<p><p><p>";
}

仅仅两个小时的jquery经验。请多多包涵。

4

1 回答 1

5

在 上使用.scroll()事件window，如下所示：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert("bottom!");
   }
});

你可以在这里测试它，这需要窗口的顶部滚动，所以它向下滚动了多少，添加可见窗口的高度并检查它是否等于整体内容的高度（document）。如果您想检查用户是否靠近底部，它看起来像这样：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       alert("near bottom!");
   }
});

您可以在此处测试该版本，只需将其调整100为您想要触发的底部的任何像素。

现在，不是在底部提醒用户，而是使用ajax来获取要在底部附加的数据。

  $.ajax({
      url: "handle.php",
      type: "post",
      data: values,
      success: function(data){
           $("#result").append(data);
      },
      error:function(){
          alert("failure");
          $("#result").append('Error Occurred while fetching data.');
      }   
    });
于 2013-08-02T16:39:06.190 回答