3

最近、イオンフレームワークを使用してモバイルアプリを構築しようとしました。そして、約30個以上のアイテムがある場合、ionicのリストダイレクトは非常に遅く、非常に悪いことがわかりました。ウォッチャーの数を減らすためにangularjsでbindonceメソッドを試しましたが、あまり役に立ちません。そこで、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 個のアイテムをロードし、ユーザーが電話の下端までスクロールするたびに、さらに 10 個のアイテムをロードするloadMore関数を呼び出します。しかし、loadMore関数が 1 回だけ呼び出されたように見えるため、配列が 100 項目を超えているのに 20 項目のリストしかありません。

多分私は間違っているか、イオンフレームワークの無限スクロールにエラーがありますか?

4

3 に答える 3

3

コードに問題があることがわかりました。コードで完了コールバックを見逃しました。私は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 に答える