ionic ion-refresher 

<body ng-app="ccApp">
  <ion-content ng-controller="MyController">

      <!--
            做为 ionContent 或 ionScroll的子元素
            刷新完成以后，使用 $broadcast 广播 'scroll.refreshComplete'事件
            pulling-icon：下拉箭头样式，http://ionicons.com/网站获取相应的类名
            spinner：数据加载图标 http://ionicframework.com/docs/api/directive/ionSpinner/ 添加相应的类名
            on-pulling：往下拉取时执行的代码
            pulling-text：spinner下方显示的文字
            on-refresh：向下拉取刷新后执行的代码
      -->

      <ion-refresher
              refreshing-icon="crescent"
              disable-pulling-rotation=true
              pulling-icon="ion-ios-arrow-down"
              spinner="bubbles"
              on-pulling="doPulling()"
              pulling-text="数据正在加载中..."
              on-refresh="doRefresh()">

      </ion-refresher>
      
      <ion-list>
          <ion-item ng-repeat="item in items" ng-bind="item"></ion-item>
      </ion-list>
  </ion-content>
  <script type="text/javascript">
      angular.module('ccApp', ['ionic'])
              .controller('MyController', function($scope, $http) {
                  $scope.items = [1,2,3];
                  $scope.doRefresh = function() {

                      $scope.items = [1,2,3,4,5,6];
                      $scope.$broadcast('scroll.refreshComplete');
                  };
                  $scope.doPulling = function() {
                      console.log('你开始向下拉取了');
                  }
              });
  </script>

 

posted @ 2015-03-25 15:50  wheats  阅读(1914)  评论(0)    收藏  举报