原文首發(fā)地址

1. 概述
   該框架提供了很多功能，說說下拉刷新這個功能。

原生的iOS開發(fā)都有很好的刷新控件，這中H5的開發(fā)這樣的控件使用起來還是很簡單的。

1:看看html顯示代碼

<ion-view>    
   <ion-content>        
      <ion-refresher                
       pulling-text="下拉刷新..."                
       on-refresh="pageContext.doRefresh()">  
      </ion-refresher>     
   <div class="test_view" ng-repeat="item in pageContext.testArrys">            
    {{item}}        
   </div> 
   </ion-content>
</ion-view>

html代碼.png

很簡單吧
看看向下拉的效果

下拉效果.png

2:下來刷新的函數(shù)，和及時控制停止刷新控制。

angular.module('invocePlusBX').controller('testViewController', ['$scope', function ($scope) {    
   var testData = {        
    testArrys: [],     
    //下拉刷新函數(shù)  
    doRefresh:function () {      
          doRefreshMore();    
     }    
   }; 
   $scope.pageContext = testData;
   initData();
   //初始化數(shù)據(jù)
   function initData() {  
      for (var i=0;i < 3;i++) {           
           testData.testArrys.push("M"+i);     
      }  
  }    
 //下拉刷新    
 function doRefreshMore() { 
       for (var i=0;i < 5;i++) {            
          testData.testArrys.push("AA:"+i);  
      }       
    endRefreshAction();
  } 
  //停止刷新
  function endRefreshAction() {  
        $scope.$broadcast('scroll.refreshComplete');
  }
}]);

初始化的函數(shù)就是initData()就是給前端標(biāo)簽ng-repeaet賦值顯示。

當(dāng)下拉刷新就要去請求網(wǎng)絡(luò)，請求的函數(shù)就是doRefreshMore ()，這里就要注意了，當(dāng)請求網(wǎng)絡(luò)完成的時候，就是停止前端刷新的控制。所以就要控制了。
所以封裝了一個停止刷新的函數(shù)endRefreshAction ()于是乎就可以隨便的使用了。

下一篇：ionic-上拉加載

如有問題可添加我的QQ：1290925041
還可添加QQ群:234812704（洲洲哥學(xué)院）
歡迎各位一塊學(xué)習(xí)，提高逼格！
也可以添加洲洲哥的微信公眾號

更多消息

更多信iOS開發(fā)信息 請以關(guān)注洲洲哥 的微信公眾號，不定期有干貨推送：

這里寫圖片描述