ionic ion-refresher

最新推荐文章于 2024-10-18 17:51:23 发布

weixin_30702413

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量102

点赞数

文章标签： javascript ViewUI

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

版权

<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>