滚动刷新 : ion-infinite-scroll
使用ion-infinite-scroll指令可以为滚动容器(ion-scroll或ion-content)增加 滚动刷新功能:
<ion-infinite-scroll on-infinite="">...</ion-infinite-scroll>
ion-infinite-scroll指令有如下属性:
on-infinite - 必须。当滚动到底部时执行此表达式
distance - 可选。距底部距离百分比。当距离底部超过此数值时,执行on-infinite。默认为1%
icon - 可选。载入时显示的图标。默认是ion-load-d。ionic推荐使用spinner代替icon属性
spinner - 可选。载入时的spinner。默认是ionSpinner
immediate-check - 可选。是否在载入时立即检查滚动框范围
<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>
当 icon="ion-loading-c" 无效果时,可是用 refreshing-icon="ion-loading-c"
拉动刷新 : ion-refresher
使用指令ion-refresher可以为滚动容器(ion-scroll或ion-content)增加 拉动刷新/pull-to-refresh的功能:
<ion-refresher></ion-refresher>
ion-refresher指令有以下可选的属性:
on-refresh - 当用户向下拉动足够的距离并松开时,执行此表达式
on-pulling - 当用户开始向下拉动时,执行此表达式
pulling-text - 当用户向下拉动时,显示此文本
pulling-icon - 当用户向下拉动时,显示此图标
refreshing-icon - 当用户向下拉动并松开后,显示的等待图标。ionic推荐使用spinner 代替这个属性
spinner - 和refreshing-icon的作用一样,但spinner是基于SVG的动画
disable-pulling-rotation - 禁止下拉图标旋转动画
注意在刷新完毕后,应当使用作用域的$broadcast()方法通知框架:
$scope.$broadcast("scoll.refreshComplete")
<ion-content ng-controller="MyController">
<ion-refresher pulling-text="Pull to refresh" refreshing-text="Loading..." refreshing-icon="ion-loading-c" pulling-icon="ion-ios7-arrow-thin-down" on-refresh="doRefresh()"> </ion-refresher>
</ion-content>
function MyController($scope, $http) {
$scope.doRefresh = function() {
$http.get('/more-items').success(function(items) {
//TODO:
$scope.$broadcast('scroll.refreshComplete');//广播通知数据刷新完成
});
};
//接受广播消息
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
// logic})
PS:
//广播消息,通知上推加载更多的代码执行完毕
$scope.$broadcast('scroll.infiniteScrollComplete');
$scope.$broadcast("scoll.refreshComplete");
参考:
http://www.w2bc.com/Article/33160