{"id":744,"date":"2018-02-25T20:33:20","date_gmt":"2018-02-25T12:33:20","guid":{"rendered":"http:\/\/60.205.208.74\/2018\/02\/25\/ionic-%e5%8a%a0%e8%bd%bd%e5%8a%a8%e4%bd%9c\/"},"modified":"2018-02-25T20:33:20","modified_gmt":"2018-02-25T12:33:20","slug":"ionic-%e5%8a%a0%e8%bd%bd%e5%8a%a8%e4%bd%9c","status":"publish","type":"post","link":"https:\/\/www.puzi7.net\/?p=744","title":{"rendered":"ionic \u52a0\u8f7d\u52a8\u4f5c"},"content":{"rendered":"<span itemprop=\"description\"><div class=\"article-body\">\n<div class=\"article-intro\" id=\"content\">\n<h1>ionic \u52a0\u8f7d\u52a8\u4f5c<\/h1>\n<p>$ionicLoading \u662f ionic \u9ed8\u8ba4\u7684\u4e00\u4e2a\u52a0\u8f7d\u4ea4\u4e92\u6548\u679c\u3002\u91cc\u9762\u7684\u5185\u5bb9\u4e5f\u662f\u53ef\u4ee5\u5728\u6a21\u677f\u91cc\u9762\u4fee\u6539\u3002<\/p>\n<h3>\u7528\u6cd5<\/h3>\n<pre>\nangular.module('LoadingApp', ['ionic'])\n.controller('LoadingCtrl', function($scope, $ionicLoading) {\n  $scope.show = function() {\n    $ionicLoading.show({\n      template: 'Loading...'\n    });\n  };\n  $scope.hide = function(){\n    $ionicLoading.hide();\n  };\n});\n<\/pre>\n<h3>\u65b9\u6cd5<\/h3>\n<p>\n\u663e\u793a\u4e00\u4e2a\u52a0\u8f7d\u6548\u679c\u3002<\/p>\n<pre>\nshow(opts)\n<\/pre>\n<table class=\"reference\">\n<thead>\n<tr>\n<th>\u53c2\u6570<\/th>\n<th>\u7c7b\u578b<\/th>\n<th>\u8be6\u60c5<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n        opts<\/p>\n<\/td>\n<td>\n<p>  <code>object<\/code>\n      <\/td>\n<td>\n<p>loading\u6307\u793a\u5668\u7684\u9009\u9879\u3002\u53ef\u7528\u5c5e\u6027\uff1a<\/p>\n<ul>\n<li><code>{string=}<\/code> <code>template<\/code> \u6307\u793a\u5668\u7684html\u5185\u5bb9\u3002<\/li>\n<li><code>{string=}<\/code> <code>templateUrl<\/code> \u4e00\u4e2a\u52a0\u8f7dhtml\u6a21\u677f\u7684url\u4f5c\u4e3a\u6307\u793a\u5668\u7684\u5185\u5bb9\u3002<\/li>\n<li><code>{boolean=}<\/code> <code>noBackdrop<\/code> \u662f\u5426\u9690\u85cf\u80cc\u666f\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u5b83\u4f1a\u663e\u793a\u3002<\/li>\n<li><code>{number=}<\/code> <code>delay<\/code> \u6307\u793a\u5668\u5ef6\u8fdf\u591a\u5c11\u6beb\u79d2\u663e\u793a\u3002\u9ed8\u8ba4\u4e3a\u4e0d\u5ef6\u8fdf\u3002<\/li>\n<li><code>{number=}<\/code> <code>duration<\/code> \u7b49\u5f85\u591a\u5c11\u6beb\u79d2\u540e\u81ea\u52a8\u9690\u85cf\u6307\u793a\u5668\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u6307\u793a\u5668\u4f1a\u4e00\u76f4\u663e\u793a\uff0c\u76f4\u5230\u89e6\u53d1<code>.hide()<\/code>\u3002<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\n\u9690\u85cf\u4e00\u4e2a\u52a0\u8f7d\u6548\u679c\u3002<\/p>\n<pre>\nhide()\n<\/pre>\n<h3>API<\/h3>\n<table class=\"reference\">\n<thead>\n<tr>\n<th>\u5c5e\u6027<\/th>\n<th>\u7c7b\u578b<\/th>\n<th>\u8be6\u60c5<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n        delegate-handle<\/p>\n<div><em>(\u53ef\u9009)<\/em><\/div>\n<\/td>\n<td>\n<p>  <code>\u5b57\u7b26\u4e32<\/code>\n      <\/td>\n<td>\n<p>\u8be5\u53e5\u67c4\u5b9a\u4e49\u5e26\u6709<code>$ionicListDelegate<\/code>\u7684\u5217\u8868\u3002<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n        show-delete<\/p>\n<div><em>(\u53ef\u9009)<\/em><\/div>\n<\/td>\n<td>\n<p>  <code>\u5e03\u5c14\u503c<\/code>\n      <\/td>\n<td>\n<p>\u5217\u8868\u9879\u7684\u5220\u9664\u6309\u94ae\u5f53\u524d\u662f\u663e\u793a\u8fd8\u662f\u9690\u85cf\u3002<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n        show-reorder<\/p>\n<div><em>(\u53ef\u9009)<\/em><\/div>\n<\/td>\n<td>\n<p>  <code>\u5e03\u5c14\u503c<\/code>\n      <\/td>\n<td>\n<p>\u5217\u8868\u9879\u7684\u6392\u5e8f\u6309\u94ae\u5f53\u524d\u662f\u663e\u793a\u8fd8\u662f\u9690\u85cf\u3002<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n        can-swipe<\/p>\n<div><em>(\u53ef\u9009)<\/em><\/div>\n<\/td>\n<td>\n<p>  <code>\u5e03\u5c14\u503c<\/code>\n      <\/td>\n<td>\n<p>\u5217\u8868\u9879\u662f\u5426\u88ab\u5141\u8bb8\u6ed1\u52a8\u663e\u793a\u9009\u9879\u6309\u94ae\u3002\u9ed8\u8ba4\uff1atrue\u3002<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr>\n<h2>\u5b9e\u4f8b<\/h2>\n<h3>HTML \u4ee3\u7801\uff1a<\/h3>\n<pre>\n&lt;html ng-app=\"ionicApp\"&gt;\n  &lt;head&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width\"&gt; \n    \n    &lt;title&gt;Ionic Modal&lt;\/title&gt;\n\n     &lt;link href=\"http:\/\/www.runoob.com\/static\/ionic\/css\/ionic.min.css\" rel=\"stylesheet\"&gt;\n    &lt;script src=\"http:\/\/www.runoob.com\/static\/ionic\/js\/ionic.bundle.min.js\"&gt;&lt;\/script&gt;\n  &lt;\/head&gt;\n  &lt;body ng-controller=\"AppCtrl\"&gt;\n    \n      &lt;ion-view title=\"Home\"&gt;\n        &lt;ion-header-bar&gt;\n          &lt;h1 class=\"title\"&gt;The Stooges&lt;\/h1&gt;\n        &lt;\/ion-header-bar&gt;\n        &lt;ion-content has-header=\"true\"&gt;\n          &lt;ion-list&gt;\n            &lt;ion-item ng-repeat=\"stooge in stooges\" href=\"#\"&gt;{{stooge.name}}&lt;\/ion-item&gt;\n          &lt;\/ion-list&gt;\n        &lt;\/ion-content&gt;\n      &lt;\/ion-view&gt;\n    \n  &lt;\/body&gt;\n&lt;\/html&gt;\n\n<\/pre>\n<h3>JavaScript \u4ee3\u7801<\/h3>\n<pre>\nangular.module('ionicApp', ['ionic'])\n.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {\n\n  \/\/ Setup the loader\n  $ionicLoading.show({\n    content: 'Loading',\n    animation: 'fade-in',\n    showBackdrop: true,\n    maxWidth: 200,\n    showDelay: 0\n  });\n  \n  \/\/ Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.\n  $timeout(function () {\n    $ionicLoading.hide();\n    $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];\n  }, 2000);\n  \n});\n<\/pre>\n<p><a href=\"\/try\/tryit.php?filename=ionic_ionicloading\" target=\"_blank\"><button class=\"btn example-btn\">\u5c1d\u8bd5\u4e00\u4e0b \u00bb<\/button><\/a><\/p>\n<hr>\n<h2>$ionicLoadingConfig<\/h2>\n<p>\u8bbe\u7f6e\u52a0\u8f7d\u7684\u9ed8\u8ba4\u9009\u9879:<\/p>\n<h3>\u7528\u6cd5:<\/h3>\n<pre>\nvar app = angular.module('myApp', ['ionic'])\napp.constant('$ionicLoadingConfig', {\n  template: '\u9ed8\u8ba4\u52a0\u8f7d\u6a21\u677f\u2026\u2026'\n});\napp.controller('AppCtrl', function($scope, $ionicLoading) {\n  $scope.showLoading = function() {\n    $ionicLoading.show(); \/\/\u914d\u7f6e\u9009\u9879\u5728 $ionicLoadingConfig \u8bbe\u7f6e\n  };\n});\n<\/pre>\n<\/p><\/div>\n<\/p><\/div>\n<span>","protected":false},"excerpt":{"rendered":"<p class=\"excerpt\"><span itemprop=\"description\">ionic \u52a0\u8f7d\u52a8\u4f5c $ionicLoading \u662f ionic \u9ed8\u8ba4\u7684\u4e00\u4e2a\u52a0\u8f7d\u4ea4\u4e92\u6548\u679c\u3002&hellip;<\/span><\/p>\n<p class=\"more-link-p btn-align-right\"><a class=\"green zoom-btn\" href=\"https:\/\/www.puzi7.net\/?p=744\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,26],"tags":[43,72,73,93],"class_list":["post-744","post","type-post","status-publish","format-standard","hentry","category-hybrid","category-mobile","tag-angular","tag-hybrid","tag-ionic","tag-mobile","zoom-theme-has-thumb"],"_links":{"self":[{"href":"https:\/\/www.puzi7.net\/index.php?rest_route=\/wp\/v2\/posts\/744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.puzi7.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.puzi7.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.puzi7.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.puzi7.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=744"}],"version-history":[{"count":0,"href":"https:\/\/www.puzi7.net\/index.php?rest_route=\/wp\/v2\/posts\/744\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.puzi7.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.puzi7.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.puzi7.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}