如何在滾動時實現自動加載更多數據功能？

Question

我被困在這兩天了。 我正在顯示一個主題列表。 一切正常，但每當我滾動到頁面底部時，我想在列表中添加更多數據，就像在流行的社交媒體網站上一樣。

這是我的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函數？ 請幫忙。

Answer 1

看看jQuery Scrollbox插件 。 您可以使用它輕松實現所需的功能。 只需在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
        }
    });

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

工作演示

參考代碼