ionic 和

滾動刷新 : 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