Question

我正在尝试从http, json array获取数据并显示在list view中，并且有超过1000个项目并且一次加载所有项目会使滚动变得如此滞后并且我首先尝试加载20个项目向下滚动我想加载更多20项，但我的代码无效。任何人都可以帮助我。

HTML

 <ion-content ng-controller="ListController" on-infinite-scroll="addMoreItem"     class="has-subheader" scroll-watch >
      <ion-list >
        <ion-item href="{{ item.url }}.jpg" ng-repeat="item in id | limitTo:numberOfItemsToDisplay" class="item-thumbnail-left item-text-wrap" >
          <img src="{{ item.thumbnailUrl }}.jpg" alt="Photo">
          <h2>
            {{item.id}}
          </h2>
          <p>{{item.title}}</p>
        </ion-item>
      </ion-list>
  </ion-content>

AngularJS

 .controller('ListController',['$scope','$http',function($scope,$http){
     $http.get('http://jsonplaceholder.typicode.com/photos').success(function(data){     
    $scope.id = data;
   })
     $scope.numberOfItemsToDisplay = 20; // number of item to load each time 
     $scope.addMoreItem = function(done) {
     if ($scope.item.length >= $scope.numberOfItemsToDisplay)
     $scope.numberOfItemsToDisplay += 20; // load 20 more items
      done(); // need to call this when finish loading more data
   }
   }])

Answer 1

在处理大量列表时，离子建议你应该使用collection-repeat指令而不是ng-repeat因为它提供了更好的性能。 collection-repeat只向DOM呈现当前可见的项目，以及它如何保持性能提升。请在此处阅读官方文档：collection-repeat

Answer 2

我建议通过infinite-scroll ..：）

解决它

在Ionic App中优化大型列表视图

2 个答案: