Hi,
I'm trying to implement infinite scroll explained here (https://blog.appery.io/2015/07/how-to...).
I followed all the steps. I expected to work as follows:
As the limit is set to 10, then first when I navigate to the page, 10 items will be displayed. When I scroll down another 10 will be displayed, starting from the item number 11 (I set skip = 0).
However, when happens is that only first ten are loaded, and when I scroll down, nothing else is loaded. No errors have appeared though.
One thing I've noticed, is when try to scroll while the page is being "displayed" (I mean it is loading but not completely shown), after that when the page is displayed, all items (20) are displayed together. It is like the event triggered on show+srcoll together!!
As in the your tutorial, I have one global JS file with the JS:
pre
var onScrollHandler = function(){
window.clearTimeout(self.scrollTimeout);
var onDelay = function(){
var scrollTop = jQuery(window).scrollTop();
var windowHeight = jQuery(window).height();
var scrollHeight = jQuery(document).height();
var scrollBottom = scrollHeight - scrollTop - windowHeight;
Code: Select all
console.log("scrollBottom = " + scrollBottom);
if(scrollBottom < 50)
jQuery(window).trigger("onScrollBottom");
};
self.scrollTimeout = window.setTimeout(onDelay, 500);
};
$(function() {
jQuery(window).scroll(onScrollHandler);
});/pre
and I have one page load event with the following JS:
prevar onScrollBottom = function(){
console.log('test');
var infiniteList = Apperyio.storage.dogsInfinite.get();
Code: Select all
if(infiniteList.noMoreItems == "true")
return;
infiniteList.skip = parseInt(infiniteList.skip) + parseInt(infiniteList.limit) + "";
Apperyio.storage.dogsInfinite.set(infiniteList);
dogsListInfinite.execute();
};
jQuery(window).bind("onScrollBottom", onScrollBottom);/pre
And two page show events, first with JS:
pre//Here you can set the needed "limit". Currently it's set to 6.
var infiniteList = {limit: "10", skip: "0", noMoreItems: undefined};
Apperyio.storage.dogsInfinite.set(infiniteList);
console.log(infiniteList);/pre
And the second is invoking the service codedogsListInfinite/code
In addition, on the service success, I have the following JS before the mapping:
preself.dogsScrollTop = jQuery(window).scrollTop();
if(data.length == 0){
var infiniteList = Apperyio.storage.dogsInfinite.get();
infiniteList.noMoreItems = "true";
Code: Select all
Apperyio.storage.dogsInfinite.set(infiniteList);
};
//Where "infinite_list" is your list component name.
self.dogsListItems = Apperyio("infinite_list").find("li:not([data-appery-tpl])");
dogsListItems.detach();/pre
And the following JS after the mapping:
pre//Where "infinite_list" is your list component name.
Apperyio("infinite_list").prepend(self.dogsListItems);
jQuery(window).scrollTop(self.dogsScrollTop);/pre
For its worth, my App page, is not the first page in the App. And the console log that displays codescrollBottom/code value is only showing in the home page and not in the one I have list in it.
Thank you for your help