Forum | Appery.io

Hi Appery team,

I'm trying to build an app with infinite scroll feature.
By following the following great blog post, I could successfully implement the feature to List, but couldn't implement it to Grid. I know there are some related posts, but I couldn't find the answer.

・How to Build an App with Infinite Scroll
https://blog.appery.io/2015/07/how-to...

I found the following information and code, but I don't know what kind of value do I put to the code.

・We really need an infinite scrolling component/ grid.It has become a standard view on many apps now.
https://getsatisfaction.com/apperyio/...

self.eventsListItems = Apperyio("infinite_wrapper").find("[name=item_wrapper]:not([data-appery-tpl])");

I prepared a very simple grid example as follows. Would you give me a specific example code? What value do I put to the above code (infinite_wrapper and item_wrapper)?

One Grid : mobilegrid_103
Two Image components: mobileimage_108 and mobileimage_109

Thank you in advance!

Regards.

Hello,

Let's continue the discussion in the ticket #34185

Hi Serhii,
thank you for reply.

The URL that you gave me today is exactly the same one that I mentioned in the very first mail. So, I'd like to keep conversation here and I'm going to close the ticket #34185 because it's much easier to communicate here.

Thanks.

Hi Makoto -

Please check the similar forum thread here:
https://getsatisfaction.com/apperyio/...

Hi Illya,

thank you for reply.
Would you check this post carefully?
I referred to the forum thread at the beginning of this post in line 10.
I know the thread.
I'm referring to the code that Serhii gave in the thread.
I'm asking because there is no specific sample code in that thread.

Regards.

Your link does not work for me. Can you share the implementation that you have in your app as an app public link?

Hello Illya,

here it is.
https://appery.io/app/mobile-frame?sr...

Thank you!

1. Add the default value of the variable "dogsInfinite"
   preApperyio.storage.dogsInfinite.set({"limit":12,"skip":0});/pre
   
   1. Please disable all JS code except:
      
      It seems you use the correct JS code for the grid, but some styles, which you change on that page break the app. Please use all styles in the CSS file.

Hello Serhii,

thank you for your reply.

By following the Appery blog instruction, I've already added the default value of the variable "dogsInfinite".

https://blog.appery.io/2015/07/how-to...

As for styles, I follow your advice and create a CSS file.

But, I think the problem is somewhere in the following two JavaScript files because the loading problem occurs after executing dogsListInfinite.

1. The JavaScript BEFORE Success Event mapping

   self.dogsScrollTop = jQuery(window).scrollTop();
   if(data.length == 0){
   var infiniteList = Apperyio.storage.dogsInfinite.get();
   infiniteList.noMoreItems = "true";

   Apperyio.storage.dogsInfinite.set(infiniteList);
   };
   self.dogsListItems = Apperyio("List_mobilegrid_94_wrapper").find("[name=mobilegrid_94]:not([data-appery-tpl)");
   dogsListItems.detach();

2. The JavaScript AFTER Success Event mapping

   Apperyio("mobilegrid_94").prepend(self.dogsListItems);
   jQuery(window).scrollTop(self.dogsScrollTop);

   Is there anything wrong with the above code?

   Thank you.

It works fine for me: uploads new items to the page.
What exactly doesn't work for you?