当用户从 api 到达底部时，使 am 自动滚动加载更多数据

Question

好的，我有一个 api，我从中获取数据并将数据放入一个数组中，然后将数据放在一个 html 页面上供用户滚动浏览。一切正常。

我想知道我现在如何只将前 10 个结果放到一个页面上，然后从数组中自动重新加载其余的结果。 我见过那些使用 mysql 但从数组中获取数据的人仍然困扰着我。

欢迎任何帮助。

$url = 'API';
$ch = curl_init();
curl_setopt($ch, CURLOPT_U`enter code here`RL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
$output = curl_exec($ch);
$info = curl_getinfo($ch);
curl_close($ch);


$echo_array = $array['jobs'];
usort($echo_array, function($a, $b) {
    return strtotime($a['einsatzstartdatum']) - strtotime($b['einsatzstartdatum']);
});
// print_r($echo_array);


foreach ($echo_array as $job)
{
    //echo "Id:". $job['ID'] ."\n";
    echo "Town:". $job['einsatzort'] ."\n";
    echo "stellentitel:". $job['stellentitel'] ."\n";
    echo "einsatzstartdatum:". $job['einsatzstartdatum'] ."\n";
    echo "bewerbunganlagenbenoetigt:". $job['bewerbunganlagenbenoetigt'] ."\n"."\n"."\n";

};

Answer 1

如果只是关于显示，我会将内容放在一个 javascript 数组中，其中包含所有 php 行。

而不是在到达底部时使用滚动事件更新内容。

这是我制作的一个小例子，以了解我将如何去做： （请记住，这是基于一次加载所有数据的想法）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script type="text/javascript">

    //fill a javascript arr with all your content
    var dummyContentArr = new Array();

    var limit = 10;

    //just for the example some dummy data
    for(var i = 0; i < 100; i++) {
        var dummyContent = 'town: yada ' + i +  '"\n"' + 
        'stellentitel: test ' + i + '"\n"' +
        'einsatzstartdatum: test ' + i + '"\n" ' +
        'bewerbunganlagenbenoetigt: test ' + i + '"\n"';
        dummyContentArr.push(dummyContent);
    }

    $(document).ready(function() {
        displayContent(10);

        //this scroll event will will update the limit when the scroll bar hits the bottom
        $('#content').on('scroll', function() {
            if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
                displayContent(limit);
                limit += 10;
            }
        });

    });

    //just a simple function thingy to update the content
    function displayContent(limit) {
        content = '';
        for(i = 0; i < limit; i++) {
            content += dummyContentArr[i]; 
        }
        $('#content').html(content);
    }
</script>

<style>
    #content {
        background-color: red;
        height: 200px;
        width: 200px;
        overflow-y: scroll;
    }
</style>


<div id="content"></div>