ion-infinite-scroll
隶属于ionContent
或 ionScroll
当用户到达页脚或页脚附近时,ionInfiniteScroll指令允许你调用一个函数 。
当用户滚动的距离
超出底部的内容时,就会触发你指定的on-infinite
。
用法
<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'。 |