课程表

ionic 准备

ionic CSS

ionic JavaScript

工具箱
速查手册

ionic 背景层

当前位置：免费教程 » 移动开发 » ionic

我们经常需要在 UI 上，例如在弹出框、加载框、其他弹出层中显示或隐藏背景层。

在组件中可以使用$ionicBackdrop.retain()来显示背景层，使用$ionicBackdrop.release()隐藏背景层。

每次调用retain后，背景会一直显示，直到调用release消除背景层。

实例

HTML 代码

  1. <body ng-app="starter" ng-controller="actionsheetCtl" >
  2. 	<ion-pane>
  3. 	    <ion-content >
  4. 	        <h2 ng-click="action()">$ionicBackdrop</h2>
  5. 	    </ion-content>
  6. 	</ion-pane>
  7. </body>

JavaScript 代码

  1. angular.module('starter', ['ionic'])
  2.  
  3. .run(function($ionicPlatform) {
  4.   $ionicPlatform.ready(function() {
  5.     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
  6.     // for form inputs)
  7.     if(window.cordova && window.cordova.plugins.Keyboard) {
  8.       cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  9.     }
  10.     if(window.StatusBar) {
  11.       StatusBar.styleDefault();
  12.     }
  13.   });
  14. })
  15.  
  16. .controller( 'actionsheetCtl',['$scope','$timeout' ,'$ionicBackdrop',function($scope,$timeout,$ionicBackdrop){
  17.  
  18.     $scope.action = function() {
  19.        $ionicBackdrop.retain();
  20.        $timeout(function() {    //默认让它1秒后消失
  21.          $ionicBackdrop.release();
  22.        }, 1000);
  23.     }; 
  24. }])

我来试一下

显示效果如下图所示：

转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号