优化离子应用程序中的大列表视图

Optimizing large list View in Ionic App

本文关键字：列表 视图 应用程序 优化      更新时间：2023-09-26

我正在尝试从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
   }
   }])

在处理庞大的列表时，ionic 建议你应该使用 collection-repeat 指令而不是ng-repeat因为它提供了更好的性能。 collection-repeat仅呈现到当前可见的尽可能多的项目到 DOM 中，这就是它保持性能的方式。请在此处阅读有关官方文档的更多信息：收集重复

我建议通过无限滚动来解决它。 :)

相关文章：