Question

我使用Ionic框架（版本1.0.0-beta.14）通过Intel xdk（版本3759）构建混合应用程序，我遇到无限滚动问题。 'on-infinite'指令调用app负载上的函数，并且不会停止。

我的应用页面位于唯一的html文件（sub_pages）。

在我的场景中，我需要加载所有票证，因此使用'limitTo'来限制页面中的票证。

一块html

<div id="lista_tickets_page" ng-controller="TicketsController as ticketCtrl" class="upage-content vertical-col left hidden has-subheader">


  <ion-scroll>
    <div style="margin-top:100px;">

      <ion-list class="widget uib_w_81 d-margins" data-uib="ionic/list" data-ver="0">
        <div class="card card-1 border-card" data-uib="ionic/list_item" data-ver="0" id="list_ticket" ng-repeat="ticket in ticketCtrl.tickets  | filter:ticket_cod | limitTo:numberDisplay" item="ticket" ng-class="ticketCtrl.getClass(ticket[2])">

        </div>

      </ion-list>

      <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>


    </div>
  </ion-scroll>
</div>

一块控制器

angular
  .module('myApp')
  .controller("TicketsController", ['Ticket', 'baseHost', 'baseCall', 'User', '$scope', '$rootScope', '$interval', '$timeout', '$ionicScrollDelegate',
      function(Ticket, baseHost, baseCall, User, $scope, $rootScope, $interval, $timeout, $ionicScrollDelegate) {

        var self = this;
        $scope.numberDisplay = 5;
        $scope.noMoreItemsAvailable = false;

        $scope.loadMore = function() {

          $scope.numberDisplay += 5;

          if ($scope.numberDisplay >= self.count)
            $scope.noMoreItemsAvailable = true;

          $scope.$broadcast('scroll.infiniteScrollComplete');

        };


        $scope.$on('$stateChangeSuccess', function() {

          $scope.loadMore();
        });

离子无限滚动不要停止

0 个答案: