Kik Infinite Scrolling Using App.js

Question

I don't really understand how I should implement the infinite scroll function into my site. I understand its purpose, but perhaps a more Trevor technical explanation of what the function is doing will allow me to understand it and implement it in a more effective manner. Additionally, an example of its use with context in regard to the rest of the website would be much appreciated.

Thanks in advance,
Palmer

Answer 1

This question seems to be more related to App.js (open source mobile UI library) than the Kik browser and APIs...

Regardless, below is an example page that would dynamically load items into the list as the user scrolls.

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