ionic ion-refresher

時間 2019-11-12

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。