ionic <ion-infinite-scroll> 和 <ion-refresh>

滚动刷新 : 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

转载于:https://my.oschina.net/jack088/blog/403345

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值