ion-infinite-scroll
作者:本站编辑 发布时间:2015-11-24 来源:本站原创
点击数:
用法
<ion-content ng-controller="MyController"> <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(); }); }当没有更多数据加载时，就可以用一个简单的方法阻止无限滚动，那就是angular的ng-if 指令:
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()"> </ion-infinite-scroll>
API
| 属性 | 类型 | 详情 |
|---|
| on-infinite | 表达式 | 当滚动到底部时触发的时间。 |
| distance(可选) | 字符串 | 从底部滚动到触发on-infinite表达式的距离。默认: 1%。 |
| icon(可选) | 字符串 | 当加载时显示的图标。默认: 'ion-loading-d'。 |