Ionic Framework Infinite Scrolling

Ionic Framework is very friendly to use and implement, but when dealing with large dataset with ng-repeat in list item in the view, the performance becomes very poor.

To handle this problem, by appending subset of data each time to the view such as infinite scrolling will be helpful to enhance the user experience and performance.  Although I could not find any documentation in Ionic Framework Doc about infinite scrolling, there is an setting on-infinite-scroll on content directive.

If your data array is already filled in with data, one way to play with your data array in ng-repeat is combine it with filter limitTo.  By limiting your data to display, loading list on the page will be smooth.  So when scrolling down, you can change the parameter in your on-infinite-scroll function for limitTo .   

Here is an example:

See the Pen gnFyj by Sunny (@sunnycyk) on CodePen.

 

Read More