阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Ionic 加载动作

      ionic 加载动作

      $ionicLoading 是 ionic 默认的一个加载交互效果。里面的内容也是可以在模板里面修改。

      用法

      angular.module('LoadingApp', ['ionic'])
      .controller('LoadingCtrl', function($scope, $ionicLoading) {
        $scope.show = function() {
          $ionicLoading.show({
            template: 'Loading...'
          });
        };
        $scope.hide = function(){
          $ionicLoading.hide();
        };
      });
      
      

      方法

      显示一个加载效果。

      show(opts)
      
      <tr>
        <td>
          opts
      
        </td>
        <td>
      

      object

      参数类型详情

      loading指示器的选项。可用属性:

      • {string=} template 指示器的html内容。
      • {string=} templateUrl 一个加载html模板的url作为指示器的内容。
      • {boolean=} noBackdrop 是否隐藏背景。默认情况下它会显示。
      • {number=} delay 指示器延迟多少毫秒显示。默认为不延迟。
      • {number=} duration 等待多少毫秒后自动隐藏指示器。默认情况下,指示器会一直显示,直到触发.hide()
        </td>
      </tr>
      

      隐藏一个加载效果。

      hide()
      

      API

      <tr>
        <td>
          delegate-handle
      
          <div><em>(可选)</em></div>
        </td>
        <td>
      

      字符串

      属性类型详情

      该句柄定义带有$ionicListDelegate的列表。

        </td>
      </tr>
      
      <tr>
        <td>
          show-delete
      
          <div><em>(可选)</em></div>
        </td>
        <td>
      

      布尔值

      列表项的删除按钮当前是显示还是隐藏。

        </td>
      </tr>
      
      <tr>
        <td>
          show-reorder
      
          <div><em>(可选)</em></div>
        </td>
        <td>
      

      布尔值

      列表项的排序按钮当前是显示还是隐藏。

        </td>
      </tr>
      
      <tr>
        <td>
          can-swipe
      
          <div><em>(可选)</em></div>
        </td>
        <td>
      

      布尔值

      列表项是否被允许滑动显示选项按钮。默认:true。

        </td>
      </tr>
      

      实例

      HTML 代码:

      <html ng-app="ionicApp">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
      
          <title>Ionic Modal</title>
      
           <link href="http://www.axihe.com/static/ionic/css/ionic.min.css" rel="stylesheet">
          <script src="http://www.axihe.com/static/ionic/js/ionic.bundle.min.js"></script>
        </head>
        <body ng-controller="AppCtrl">
      
            <ion-view title="Home">
              <ion-header-bar>
                <h1 class="title">The Stooges</h1>
              </ion-header-bar>
              <ion-content has-header="true">
                <ion-list>
                  <ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}</ion-item>
                </ion-list>
              </ion-content>
            </ion-view>
      
        </body>
      </html>
      

      JavaScript 代码

      angular.module('ionicApp', ['ionic'])
      .controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
      
        // Setup the loader
        $ionicLoading.show({
          content: 'Loading',
          animation: 'fade-in',
          showBackdrop: true,
          maxWidth: 200,
          showDelay: 0
        });
      
        // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.
        $timeout(function () {
          $ionicLoading.hide();
          $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
        }, 2000);
      
      });
      
      

      $ionicLoadingConfig

      设置加载的默认选项:

      用法:

      var app = angular.module('myApp', ['ionic'])
      app.constant('$ionicLoadingConfig', {
        template: '默认加载模板……'
      });
      app.controller('AppCtrl', function($scope, $ionicLoading) {
        $scope.showLoading = function() {
          $ionicLoading.show(); //配置选项在 $ionicLoadingConfig 设置
        };
      });
      
      目录
      目录