web-applications - App.js を使用した Kik 無限スクロール

Question

サイトに無限スクロール機能を実装する方法がよくわかりません。私はその目的を理解していますが、関数が何をしているかについての Trevor の技術的な説明があれば、それを理解し、より効果的な方法で実装できるようになるでしょう。さらに、ウェブサイトの残りの部分に関するコンテキストでの使用例をいただければ幸いです。

前もって感謝します、
パーマー

Answer 1

この質問は、Kik ブラウザーや API よりも App.js (オープンソースのモバイル UI ライブラリ) に関連しているようです...

とにかく、以下は、ユーザーがスクロールするときに項目をリストに動的にロードするページの例です。

HTML:

<div class="app-page" data-page="home">
  <div class="app-topbar">
    <div class="app-title">Title</div>
  </div>
  <div class="app-content">
    <ul class="app-list"></ul>
  </div>
</div>

JS:

App.populator('home', function (page) {
  var pageNum = 0;
  App.infiniteScroll($(page).find('.app-list'), function (next) {
    pageNum++;
    $.ajax({
      url: 'url/to/data?page='+pageNum,
      success: function (data) {
        var list = [];
        data.items.forEach(function (item) {
          var li = $('<li>');
          //TODO: construct list item from data
          list.push(li);
        });
        next(list);
      }
    });
  });
});