javascript - 带有 json url 的 ionic 无限列表滚动

Question

如何使用 json url 制作 ionic 列表

json代码:

[{"id":"1","firstName":"John", "lastName":"Doe"},
{"id":"2","firstName":"Anna", "lastName":"Smith"},
{"id":"3","firstName":"Peter", "lastName":"Jones"},{......................}]

app.js

$http.get("http://localhost/app/users.php")
.success(function (response) 
{
$scope.items = response;
});

模板

<ion-list>
    <ion-item ng-repeat="x in items">
      First name: {{x.firstName}}
      Last name: {{x.lastName}}
    </ion-item>
</ion-list>

现在我想添加 ion-infinite-scroll

这是我的第一个应用程序。

Answer 1

html

<ion-content ng-controller="MyController">
   <ion-list>
   ....
    ....
   </ion-list>

  <ion-infinite-scroll
      on-infinite="loadMore()"
      distance="1%">
    </ion-infinite-scroll>
  </ion-content>

js

 function MyController($scope, $http) {
   $scope.items = [];
   $scope.loadMore = function() {
     $http.get('/more-items').success(function(items) {
       useItems(items);
       $scope.$broadcast('scroll.infiniteScrollComplete');
     });
   };

    $scope.$on('$stateChangeSuccess', function() {
      $scope.loadMore();
    });
  }

一旦没有更多数据可加载，停止无限滚动的一种简单方法是使用 Angular 的 ng-if 指令:

html

  <ion-infinite-scroll
   ng-if="moreDataCanBeLoaded()"
    icon="ion-loading-c"
    on-infinite="loadMoreData()">
  </ion-infinite-scroll>

ionic 模块

.directive('ionInfiniteScroll', ['$timeout', function($timeout) {
  return {
    restrict: 'E',
    require: ['?^$ionicScroll', 'ionInfiniteScroll'],
    template: function($element, $attrs) {
      if ($attrs.icon) return '<i class="icon {{icon()}} icon-refreshing {{scrollingType}}"></i>';
      return '<ion-spinner icon="{{spinner()}}"></ion-spinner>';
    },
    scope: true,
    controller: '$ionInfiniteScroll',
    link: function($scope, $element, $attrs, ctrls) {
      var infiniteScrollCtrl = ctrls[1];
      var scrollCtrl = infiniteScrollCtrl.scrollCtrl = ctrls[0];
      var jsScrolling = infiniteScrollCtrl.jsScrolling = !scrollCtrl.isNative();

      // if this view is not beneath a scrollCtrl, it can't be injected, proceed w/ native scrolling
      if (jsScrolling) {
        infiniteScrollCtrl.scrollView = scrollCtrl.scrollView;
        $scope.scrollingType = 'js-scrolling';
        //bind to JS scroll events
        scrollCtrl.$element.on('scroll', infiniteScrollCtrl.checkBounds);
      } else {
        // grabbing the scrollable element, to determine dimensions, and current scroll pos
        var scrollEl = ionic.DomUtil.getParentOrSelfWithClass($element[0].parentNode, 'overflow-scroll');
        infiniteScrollCtrl.scrollEl = scrollEl;
        // if there's no scroll controller, and no overflow scroll div, infinite scroll wont work
        if (!scrollEl) {
          throw 'Infinite scroll must be used inside a scrollable div';
        }
        //bind to native scroll events
        infiniteScrollCtrl.scrollEl.addEventListener('scroll', infiniteScrollCtrl.checkBounds);
      }

      // Optionally check bounds on start after scrollView is fully rendered
      var doImmediateCheck = isDefined($attrs.immediateCheck) ? $scope.$eval($attrs.immediateCheck) : true;
      if (doImmediateCheck) {
        $timeout(function() { infiniteScrollCtrl.checkBounds(); });
      }
    }
  };
}]);