Ионная структура бесконечной прокрутки только что позвонила один раз

Недавно я пытался создать мобильное приложение с ионной структурой. И я обнаружил, что список непосредственно ionic очень медленный, когда в нем всего около 30 элементов или более, это очень плохо. Я попробовал метод bindonce в angularjs, чтобы уменьшить количество наблюдателей, но это не очень помогло. Поэтому я попытался использовать функцию бесконечной прокрутки, которая есть у ionic.

Мой шаблон такой:

<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>

И мой контроллер

.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;
        }   
      }
  }
})

Моя идея состоит в том, что список будет просто загружать 10 элементов в первый раз, и каждый раз, когда пользователь прокручивает до нижнего края телефона, он вызывает функцию loadMore, которая загружает еще 10 элементов. Но похоже, что функция loadMore только что вызвала один раз, так что все, что у меня есть, это просто список из 20 элементов, в то время как мой массив содержит более 100 элементов.

Может быть, я ошибаюсь или бесконечная прокрутка ionic framework имеет ошибку?


ionic-framework hybrid-mobile-app angularjs infinite-scroll
person heobay    schedule 26.01.2014    source источник

Ответы (3)


arrow_upward
10
arrow_downward

Кажется, в Ionic 2 есть новый способ сделать это. Теперь вам нужно передать событие в обратном вызове loadMore, чтобы сигнализировать о завершении загрузки.

$scope.$broadcast('scroll.infiniteScrollComplete');
person Paul Weber    schedule 18.04.2014
comment
эта команда также была необходима для версии Ionic Framework: 1.3.1. Без него загружался только первый раз и потом спиннер завис. - person Alexander Fradiani; 10.09.2016

arrow_upward
3
arrow_downward

Я нашел, что не так с моим кодом. Я просто пропустил обратный вызов done в коде. Я видел это в примере на github, но я просто подумал, что это опция не требуется, бедняжка :)

$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);   
  }
person heobay    schedule 26.01.2014
comment
Была ли производительность лучше для вас с опцией бесконечной прокрутки? - person Kevin; 20.02.2014

arrow_upward
1
arrow_downward

Для приложения angular2/typescript ionic firebase код ниже работал.

Установите $event.state = "closed"; для вызова функции более одного раза. Полный код приведен ниже для справки.

В компоненте,

Импорт

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

Объявить

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

Вызов Firebase

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

Прокрутить вызов

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>

Вызовите getData() и добавьте firebase в конструктор.

private firebase: AngularFireDatabase
person Bharathkumar V    schedule 18.11.2017