Question

我有一个$rootScope变量，它由我的所有联系人组成，大约有500个条目，当我尝试在模式中的列表视图中加载它们时，模态有一个延迟。有没有办法在已经包含所有数据的变量上使用infinite-scroll来提高性能。

<ul class="list">
  <li class="item item-checkbox" ng-repeat="contact in $root.userContacts  track by $index">
    <label class="checkbox checkbox-energized">
      <input type="checkbox">
    </label>
    {{contact.name}}
  </li>
</ul>

我想一次只加载50个联系人，并在用户滚动时更新。

提前致谢。

Answer 1

是的，您可以使用ion-infinite-scroll。

<强> controllers.js

angular.module('starter.controllers', [])

.controller('ContactsCtrl', function($scope, Contacts, $ionicModal) {
  $scope.contacts = Contacts.more();

  /**
   * Load more.
   */
  $scope.loadMore = function(){
    $scope.contacts = $scope.contacts.concat(Contacts.more());
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };

  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };

  $ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
    $scope.openModal();
  });
});

<强> services.js

angular.module('starter.services', [])

.factory('Contacts', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var contacts = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'You on your way?',
    face: 'img/ben.png'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Hey, it\'s me',
    face: 'img/max.png'
  }, {
    id: 2,
    name: 'Adam Bradleyson',
    lastText: 'I should buy a boat',
    face: 'img/adam.jpg'
  }, {
    id: 3,
    name: 'Perry Governor',
    lastText: 'Look at my mukluks!',
    face: 'img/perry.png'
  }, {
    id: 4,
    name: 'Mike Harrington',
    lastText: 'This is wicked good ice cream.',
    face: 'img/mike.png'
  }];

  return {
    /**
     * Generate fake contacts.
     */
    more: function() {
      var response = [];
      for(var i = 0; i < 5; i++){
        response.push(contacts[Math.floor(Math.random()*contacts.length)]);
      }
      return response;
    }
  };
});

标签-contacts.html

<ion-view view-title="Contacts"> </ion-view> <script id="my-modal.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1 class="title">Contacts</h1> </ion-header-bar> <ion-content> <ion-list> <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="contact in contacts track by $index" type="item-text-wrap"> <img ng-src="{{contact.face}}"> <h2>{{contact.name}}</h2> </ion-item> </ion-list> <ion-infinite-scroll on-infinite="loadMore()" distance="1%"> </ion-infinite-scroll> </ion-content> </ion-modal-view> </script>

您可以看到working example here。

$ rootScope变量的无限滚动，用于离子列表中的性能

1 个答案: