如何在滚动时实现自动加载更多数据功能？答案

【问题标题】：How can I implement an auto load more data function on scroll?如何在滚动时实现自动加载更多数据功能？
【发布时间】：2017-03-24 00:55:50
【问题描述】：

我已经坚持了两天了。我正在显示主题列表。一切正常，但每当我滚动到页面底部时，我都想向列表中添加更多数据，就像在流行的社交媒体网站上一样。

这是我的 get-topic.php

<?php
include_once 'resources/Wall.php';
$Wall   = new Wall;
global $databaseConnection;
$username_get = mysqli_query($databaseConnection, "SELECT * from tableTopics order by columnTopicId desc limit ".$topicsPerPage."");
$numberRows = mysqli_num_rows($username_get);/* get the total number of rows and put it in a variable */
$loopCount = 1;
$html .= '  <div class="topics-box">';
while ($name = mysqli_fetch_array($username_get)) {/* loop through the topics */
    $topicId = $name['columnTopicId'];
    $topicTitle = $name['columnTopicTitle'];
    $getPic = $Wall->getTopicPicture($topicId);
    $html .= '  <div class="topic-header">
                    <img class="topic-picture" src="'.$getPic.'">
                    <a class="topic-title">'.$topicTitle.'</a>
                    <a class="topic-action-button"><div class="icon-more topic-action-button-icon"></div></a><a class="topic-follow-button"><div class="icon-footprints topic-follow-button-icon"></div>Follow</a>
                </div>
                <div class="topic-stats">
                    <div class="topic-right-stat">54k Followers</div>
                </div>';
    if ($loopCount < $numberRows) {
        $html .= '<div class="topics-border"></div>';
    }
    $loopCount ++;/* add 1 to the loop count everytime */
}
$html .= '  </div>';
echo $html;
?>

这是我的js函数

function loadMoreTopics() {
    alert("hi");
}

每当用户使用此代码滚动到页面底部时，我都会调用该函数。

        jQuery(window).scroll(function() {
            if (jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()) {
               loadMoreTopics();
            }
        });

我尝试过使用几个 Ajax 示例，但没有一个适合我。我应该使用什么 Ajax 函数？请帮忙。

【问题讨论】：

标签： javascript php jquery ajax

【解决方案1】：

看看jQuery Scrollbox plugin。您可以使用它轻松实现所需的功能。只需在您的 html 中定义容器并使用以下代码：

var $container = $('#content-container');

$container
    .on('reachbottom.scrollbox', function () {
        $.ajax({
            // options like url, dataType etc.
        }).done(function (response) {
            $container
                .append(response)
                .scrollbox('update');
        });
    })
    .scrollbox({
        distanceToReach: {
            y: 100
        }
    });

【讨论】：

【解决方案2】：

有很多插件可用于相同的。您可以使用 Jquery 自己实现它，例如：

$(function() {
   loadResults(0);
    $('.country').scroll(function() {
      if($("#loading").css('display') == 'none') {
        if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
           var limitStart = $("#results li").length;
           loadResults(limitStart); 
        }
      }
    }); 

function loadResults(limitStart) {
    $("#loading").show();
    $.ajax({
        url: "request.php",
        type: "post",
        dataType: "json",
        data: {
            limitStart: limitStart
        },
        success: function(data) {
               $.each(data, function(index, value) {
               $("#results").append("<li id='"+index+"'>"+value+"</li>");
             });
             $("#loading").hide();     
        }
    });
};
});

Working Demo

Reference Code

【讨论】：