ionic-下拉刷新

原文首发地址

1. 概述
   该框架提供了很多功能，说说下拉刷新这个功能。

原生的iOS开发都有很好的刷新控件，这中H5的开发这样的控件使用起来还是很简单的。

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:下来刷新的函数，和及时控制停止刷新控制。

angular.module('invocePlusBX').controller('testViewController', ['$scope', function ($scope) {    
   var testData = {        
    testArrys: [],     
    //下拉刷新函数  
    doRefresh:function () {      
          doRefreshMore();    
     }    
   }; 
   $scope.pageContext = testData;
   initData();
   //初始化数据
   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');
  }
}]);

初始化的函数就是initData()就是给前端标签ng-repeaet赋值显示。

当下拉刷新就要去请求网络，请求的函数就是doRefreshMore ()，这里就要注意了，当请求网络完成的时候，就是停止前端刷新的控制。所以就要控制了。
所以封装了一个停止刷新的函数endRefreshAction ()于是乎就可以随便的使用了。

下一篇：ionic-上拉加载

如有问题可添加我的QQ：1290925041
还可添加QQ群:234812704（洲洲哥学院）
欢迎各位一块学习，提高逼格！
也可以添加洲洲哥的微信公众号

更多消息

更多信iOS开发信息 请以关注洲洲哥 的微信公众号，不定期有干货推送：

这里写图片描述