Question

我最近一天尝试用离子框架构建移动应用程序。而且我发现离子的直接列表在它只有大约30个或更多的项目时非常慢，这是非常糟糕的。我在 angularjs 中尝试了 bindonce 方法来减少观察者的数量，但这并没有多大帮助。所以我尝试使用离子具有的无限滚动功能。

我的模板是这样的：

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

也许我错了或离子框架的无限卷轴有错误？

Answer 1

似乎有一种新方法可以在Ionic 2中执行此操作。现在您必须在loadMore回调中广播一个事件，以表示加载已完成。

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

Answer 2

我发现我的代码有什么问题。我刚刚错过了代码中的完成回调。我在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);   
  }

Answer 3

对于angular2 / typescript离子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

离子框架无限滚动只召唤一次

3 个答案: