Ion infinite scroll never loads the data

ionic-v1
1

I’m trying to use ion-infinite scroll, but it isn’t working. I added this code to the controller, very similar to what’s described in the docs:

  $scope.loadMore = function()
  {
    console.log("Loading More");
    $scope.populateList(30, 40); //adds items 30 through 40 from the DB to the array $scope.sharedData.venueList
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };

  $scope.$on('$stateChangeSuccess', function() {
    $scope.loadMore();
  });

The problem: When I scroll to the bottom, the animation starts, but I don’t get any message on the console.log, and the loading icon keeps spinning infinitely and nothing happens.

I have the HTML setup as such:

<body ng-app="bafafa" ng-controller="Ctrl">
  <ion-side-menus>
    <ion-pane ion-side-menu-content scroll="true" drag-content="true" edge-drag-threshold="false">
      <ion-tabs class="tabs-item-hide">
        <ion-tab title="All">
          <ion-content>
            <div>
              <ion-list can-swipe="true" >
                <!---- DATA TO BE LOADED HERE ---->
                <ion-item ng-repeat="venue in sharedData.venueList">                 
                </ion-item>
              </ion-list>

            <ion-infinite-scroll on-infinite="loadMore()" distance="1%">
            </ion-infinite-scroll>

The tags after that close correctly, I’ve checked. I just wanted to give you guys the whole structure.

2

Hey, sorry to double post, but I haven’t found a solution for this problem yet, and though I had left that part of the project in the backburner while I waited for help, I’m back to it now, and really need to know how to do it

3

Can you put your code in a codepen? It’s easier to help when we can see the error. :smile:

4

Thanks for the reply. Took me a while but here’s the codepen version: http://codepen.io/anon/pen/RNVEGM

Strangely, this one displays a different problem: It seems to call “loadMore” as soon as the app loads, even if it is not fully scrolled. And then when I scroll, it doesn’t do the infiniteScrolling process at all, the loading icon doesn’t even show up. This is not exactly the problem I’m having with the actual app, but I guess it might be related

5

In the codepen you attached, there is an error in the console: Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: venue in venueList, Duplicate key: string:Added: 0, Duplicate value: Added: 0

If you add track by $index to the ng-repeat you will see the loading will start working and the items will be added.

<ion-item ng-repeat="venue in venueList track by $index">

Are there any errors in your console for your project? This could be affecting the loading.

The load more is called on initial load without scrolling because you don’t have enough items taking up the entire height of the scroll window. If you make the height of the window smaller so that you can’t see past “Trekking”, it won’t call load more on the initial viewing. As for the loading icon, it is a known issue that the icon doesn’t show. Here are some posts on that:

1 Like
6

Hey, I managed to fix it thanks to your advice, but now I noticed that ion-infinite-scroll makes my app extremely slow. If I comment out the

<ion-infinite-scroll on-infinite="loadMore()" distance="1%">
</ion-infinite-scroll>

lines, it runs at normal speed (but obviously, can’t do the infinite scrolling). Is infinite-scroll that resource heavy?

7

Hmm I’m not entirely sure. I haven’t noticed a difference when I remove the ion-infinite-scroll from my app but I have other performance issues I am trying to work out. Have you tried using collection-repeat instead of ng-repeat (if it’s possible to use fixed height for your items)?

1 Like
8

Wow, I didn’t know about collection-repeat. It works wonders! Thank you, @brandyshea !

1 Like
9

Awesome! You’re welcome. :smile: