离子框架无限滚动刚刚调用了一次答案

【问题标题】：Ionic framework infinite scroll just have called one time离子框架无限滚动刚刚调用了一次
【发布时间】：2014-02-17 03:33:01
【问题描述】：

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

我的模板是这样的：

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

可能是我错了还是离子框架的无限滚动有错误？

【问题讨论】：

标签： angularjs infinite-scroll hybrid-mobile-app ionic-framework

【解决方案1】：

我发现我的代码有什么问题。我只是错过了代码中的 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);   
  }

【讨论】：

无限滚动选项对您来说性能更好吗？

【解决方案2】：

似乎在 Ionic 2 中有一种新方法可以做到这一点。现在您必须在 loadMore 回调中广播一个事件，以表明加载已完成。

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

【讨论】：

Ionic Framework 版本：1.3.1 也需要此命令。没有它只是第一次加载，然后微调器卡住了。

【解决方案3】：

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

【讨论】：