Infinite scroll problem. Working example needed


#1

Hi Team,

I am kind of new to this but whatever I do am not really lucky to make infinite scrolling to work.
Since in the doc you do not have example for ion-list I followed this code
http://codepen.io/anon/pen/gtbFG
But it has issue too. Once you reach the end there is endless loop and wheel is spinning and spinning.

In my case I have ionic list just like in this example and:

  • I have 40 items for the test,
  • I am sure that I call this $scope.$broadcast(‘scroll.infiniteScrollComplete’); once my LoadMORE() is done.
  • But as soon as I reach the bottom and scroller kicks in - it never stops, and browser crashes ;-(.

If you guys have somewhere working example I can use I will be really thankful.
Also you do have example of collection-repeat with the Ionic list ?

My current version of IONIC: "1.0.0-beta.11"
Angular: “1.2.22”,

Thanks,
Frank


#2

Resolved.

While adding Items to array I tried always replace the array with new one.
e…g I wanted to have always 9 times in the view, so when I loaded new record loadData( start, end ), I replace $scope.data = new data and not $scope.data.push (… new data. ).

I think if you have pretty large list e.g. 10 k items you do not want to keep everything in scope right? I was looking at this collection repeat , is there any reason why developer need to provide height and width for each item ?

Thanks,
FK


#3

Shameless self plug

Check out the latest blog post to find out why.
It explains that the forces behind collection repeat need to know where to translate new items as they enter the DOM

http://ionicframework.com/blog/collection-repeat/


#4

Looks like I am moving to collection repeat :wink:
I have now back again version with simple CSS LIST + ng repeat and just extra steps for this collection repeat