3

最近一天，我尝试使用 ionic 框架构建移动应用程序。而且我发现 ionic 的列表直接在它只有大约 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 多个项目。

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

4

3 回答 3

10

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

$scope.$broadcast('scroll.infiniteScrollComplete');
于 2014-04-18T14:11:47.987 回答
3

我发现我的代码有什么问题。我只是错过了代码中的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);   
  }
于 2014-01-26T14:28:38.420 回答
1

对于 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
于 2017-11-18T11:30:52.293 回答