首页 > 其他 > 详细

ionic ion-refresher

时间:2015-03-25 17:01:59      阅读:303      评论:0      收藏:0      [点我收藏+]
<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>

 

ionic ion-refresher

原文:http://www.cnblogs.com/weats/p/4365909.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!