0

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

pzp
  • 6,249
  • 1
  • 26
  • 38

1 Answers1

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);
      }
    });
  });
});
jairajs89
  • 4,495
  • 3
  • 18
  • 14
  • Thanks so much for making this example for me! Just need a bit of clarification. What is the purpose of appending li to list (instead of just inserting it into the html directly)? Also, is next a function (if so, where is it defined and what does it do)? – pzp Jun 14 '14 at 00:08
  • There is an error here: page is both a function argument and also then declared as a local var. I assume that it is meant only as a counter variable and one of them should be renamed! – kpollock Sep 29 '16 at 07:59
  • Nice catch, fixed – jairajs89 Apr 11 '17 at 15:05