CODEWITHSUNDEEP
angularjsinfinite-scrollhybrid-mobile-appionic-framework
heobay
heobay

Reputation: 71

Ionic framework infinite scroll just have called one time

I have tried to build mobile app with ionic framework in the recent day. And I found that the list directy of ionic is very slow when it has just about 30 items or more, it's very bad. I've tried the bindonce method in angularjs to reduce the number of watchers but it's not help much. So I tried to use the infinite scroll function that ionic has.

My template is like this:

<view title="'Pet Information'">
  <content has-header="true" has-tabs="true" on-infinite-scroll="loadMore">
    <list>
      <item ng-repeat="pet in pets" type="item-text-wrap" href="#/tab/pet/{{pet.id}}">
        <h3>{{pet.title}}</h3>
        <p>{{pet.description}}</p>
        </item>
      </item>
    </list>
  </content>
</view>

And my controller

.controller('PetIndexCtrl', function($scope, PetService) {  
  $scope.pets_all = PetService.all();
  $scope.pets = [];
  // Add just 10 pets at the first time
  var count = 0;
  for (var i = 0; i < 10; i++) {
    $scope.pets.push($scope.pets_all[i]);
    count++;
  };

  $scope.loadMore = function() {    
    var curr_count = count;
      for (var i = curr_count; i < curr_count + 10; i++) {
        if (i < $scope.pets_all.length) {
          $scope.pets.push($scope.pets_all[i]);
          count++;
        } else {
          return;
        }   
      }
  }
})

My idea is that the list will just load 10 items at the first time, and everytime user scroll to bottom edge of the phone it will call the loadMore function that will load 10 more items. But it seem that the loadMore function just have called one time, so that all I have is just the list of 20 items while my array is more than 100 items.

Maybe I'm wrong or the infinite scroll of ionic framework have error?

Upvotes: 3

Views: 7317

Answers (3)

Bharathkumar V
Bharathkumar V

Reputation: 357

For angular2/typescript ionic firebase app, the code below worked.

Set $event.state = "closed"; to call the function more than one time. The complete code is given below for reference.

In the component,

Import

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

Declare

limit: number = 10;
itemRef:FirebaseListObservable<any[]>;
itemList:any;
loadeditemList:any;

Firebase Call

getData(){
    this.itemRef = this.firebase.list('quote', {
      query: {
          orderByChild: 'title',
          limitToFirst:this.limit
      }
    });
}

Scroll Call

onInfiniteScroll($event:any) {
  this.limit += 10;
  this.getData();
  this.itemRef.forEach((itemList:any) => {
    let items:any = [];
    itemList.forEach( (item:any) => {
      items.push(item);
      return false;
    });

    this.itemList = items;
    this.loadeditemList = items;

    $event.state = "closed";
  });
}

HTML

<ion-list>
...
</ion-list>

<ion-infinite-scroll (ionInfinite)="onInfiniteScroll($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

Call getData() and inject firebase in constructor.

private firebase: AngularFireDatabase

Upvotes: 1

Paul Weber
Paul Weber

Reputation: 6688

Seems there is a new way to do this in Ionic 2. Now you have to broadcast an event in the loadMore callback, to signalize that loading is finished.

$scope.$broadcast('scroll.infiniteScrollComplete');

Upvotes: 10

heobay
heobay

Reputation: 71

I found what wrong with my code. I just missed the done callback in the code. I saw it in the example on github but I've just thought that it's a option not require, poor me :)

$scope.loadMore = function(done) {      
    $timeout(function(){
       var curr_count = count;
      for (var i = curr_count; i < curr_count + 7; i++) {
        if (i < $scope.pets_all.length) {
          $scope.pets.push($scope.pets_all[i]);
          count++;
        } else {
          return;
        }   
      }
      done();
    }, 1000);   
  }

Upvotes: 3

Related Questions