欢迎光临
梦想从学习开始!

ionic 加载动作 | 小熊教程

ionic 加载动作

Tips:您正在学习的是ionic 加载动作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8706 ,您可通过标签查询系列课程。祝您学习愉快!

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

用法

Tips:您正在学习的是ionic 加载动作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8706 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

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

方法

Tips:您正在学习的是ionic 加载动作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8706 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

显示一个加载效果。

 show(opts) 
参数 类型 详情
opts object

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

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

隐藏一个加载效果。

 hide() 

API

Tips:您正在学习的是ionic 加载动作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8706 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

属性 类型 详情
delegate-handle (可选) 字符串

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

show-delete (可选) 布尔值

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

show-reorder (可选) 布尔值

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

can-swipe (可选) 布尔值

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


实例

HTML 代码:

Tips:您正在学习的是ionic 加载动作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8706 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 <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.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">     <script src="http://www.runoob.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 代码

Tips:您正在学习的是ionic 加载动作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8706 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 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

设置加载的默认选项:

用法:

Tips:您正在学习的是ionic 加载动作 | 小熊教程系列。本文链接https://www.xxfxb.com/?p=8706 ,您可通过标签查询系列课程。小熊分享邦(www.xxfxb.com)祝您学习愉快!

 var app = angular.module('myApp', ['ionic']) app.constant('$ionicLoadingConfig', {   template: '默认加载模板……' }); app.controller('AppCtrl', function($scope, $ionicLoading) {   $scope.showLoading = function() {     $ionicLoading.show(); //配置选项在 $ionicLoadingConfig 设置   }; }); 
赞(0) 打赏
未经允许不得转载:小熊分享邦 » ionic 加载动作 | 小熊教程

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏