Бесконечный свиток + AJAX OnsenUI

Question

У меня сейчас одна проблема с пользовательским интерфейсом Onsen. Моя проблема: бесконечный свиток + ajax. Я не могу найти хороший учебник о том, как это настроить. У меня есть приложение, которое запрашивает больший объем данных через ajax из PHP-скрипта. Я хочу отобразить 30-50 статей, а затем загрузить больше, если вы прокрутите вниз. Как я могу решить это? Это сложно решить?

Заранее спасибо.

Это мой код до сих пор:

<?php
header("Access-Control-Allow-Origin: *");

include_once("Medoo.php");
use Medoo\Medoo;

$db = new Medoo([
    'database_type' => 'mysql',
    'database_name' => '*****',
    'server' => 'localhost',
    'username' => '*****',
    'password' => '*****'
]);

function getThreads($db, $start, $limit){
  $data = $db->query("SELECT id, title, content, date, userid FROM threads LIMIT ".$start.", ".$limit."")->fetchAll();
  return $data;
}

function utf8ize($d) {
    if (is_array($d)) {
        foreach ($d as $k => $v) {
            $d[$k] = utf8ize($v);
        }
    } else if (is_string ($d)) {
        return utf8_encode($d);
    }
    return $d;
}

$start=htmlspecialchars(trim($_POST['start']));
$limit=htmlspecialchars(trim($_POST['limit']));

  $query = getThreads($db, $start, $limit);
  if($query == false) {
    echo json_encode(array("code" => "failed"));
  } else {
    echo json_encode(utf8ize($query));
  }
?>

HTML:

<template id="tab1.html">
    <ons-page id="Tab1">
        <ons-pull-hook id="pull-hook">
            Nach unten ziehen um neu zu laden
        </ons-pull-hook>
        <div class="content"></div>
    </ons-page>
</template>

JavaScript:

    $(window).scroll(function(){
      if($(window).scrollTop() == $(document).height() - $(window).height()){
        getData();
      }
    });

var start = 0;
var limit = 5;

getData();

function getData(){
    $.ajax({
        type: "POST",
        url: 'http://****/****/****.php',
        crossDomain: true,
        dataType: "text json",
        data: "&start="+start+"&limit="+limit,
        success: function (data) {
            if(data.code == "failed"){

            } else {
                start += limit;
                data.reverse();
                $('#threads').html("");
                for (var i = 0; i < data.length; i++) {
                    if(data[i]['userid'] == localStorage.id){
                        $('#threads').append("<ons-card onclick='pushpc("+data[i]["id"]+","+data[i]["userid"]+");'><div id='threadid'>"+data[i]["id"]+"</div><div class='title'>"+decode_utf8(data[i]["title"])+"</div><div class='content'>"+decode_utf8(data[i]["content"])+"</div></ons-card>");
                    } else {
                    $('#threads').append("<ons-card onclick='pushpc("+data[i]["id"]+","+data[i]["userid"]+");'><div id='threadid'>"+data[i]["id"]+"</div><div class='title'>"+decode_utf8(data[i]["title"])+"</div><div class='content'>"+decode_utf8(data[i]["content"])+"</div></ons-card>");
                }
                }
            }
        }
    });
}