ion-infinite-scroll
属于ionContent或者(ionic-china中文网文档)ionScroll

当用户到达页脚或页脚附近时,ion-infinite-scroll指令允许你调用一个函数 。你可以使其加载更多或无限加载数据。

当用户滚动的距离超出底部的内容时,就会触发你指定的on-infinite

实例该文档来自ionic中文网ionic-china

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

  <ion-infinite-scroll
    on-infinite="loadMore()"
    distance="1%">
  </ion-infinite-scroll>
</ion-content>
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();
  });
}

当没有更多数据加载时,可以用一个简单的方法阻止无限滚动,ng-if指令:

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

API

属性 类型 说明
on-infinite expression

上拉并刷新后触发

distance
(可空)
string

从底部滚动到触发on-infinite表达式的距离 默认: 1%

spinner
(可空)
string

同refreshing-icon,但spinner基于SVG动画 参考ionSpinner

icon
(可空)
string

当加载时显示的图标 默认: 'ion-loading-d'

immediate-check
(可空)
boolean

是否在页面载入后立即检查滚动边界 默认为true(这将导致页面载入后立即调用刷新)