ionic 背景层
作者:归人云淡风轻
时间:2026-08-11
浏览:1
在 UI 设计和交互实现里,经常会遇到这样的需求:比如弹出框、加载框,或者其他各类弹出层出现时,需要把背景层显示出来;而在它们关闭时,又要把背景层隐藏掉。 在组件里,想把背景遮罩显示出来,可以调用$ionicBackdrop.retain();不需要时,再通过$ionicBackdrop.relea
本文目录
在 UI 设计和交互实现里,经常会遇到这样的需求:比如弹出框、加载框,或者其他各类弹出层出现时,需要把背景层显示出来;而在它们关闭时,又要把背景层隐藏掉。
在组件里,想把背景遮罩显示出来,可以调用$ionicBackdrop.retain();不需要时,再通过$ionicBackdrop.release()将背景层隐藏。
每次调用retain后,背景会一直显示,直到调用release消除背景层。
实例
HTML 代码
$ionicBackdrop
Ja vaScript 代码
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller( 'actionsheetCtl',['$scope','$timeout' ,'$ionicBackdrop',function($scope,$timeout,$ionicBackdrop){
$scope.action = function() {
$ionicBackdrop.retain();
$timeout(function() { //默认让它1秒后消失
$ionicBackdrop.release();
}, 1000);
};
}])
显示效果如下图所示:
作者最新文章
coreldraw快捷键怎么设置在哪里
2026-11-02 21:39
AO3最新可用链接及中文入口汇总
2026-10-29 13:32
coreldraw怎么插入图片 图片导入步骤
2026-10-27 15:37
coreldraw快捷键冲突 怎么改 自定义按键解决
2026-10-24 08:50
AO3中文界面设置指南与核心功能使用教程
2026-10-14 23:28
上一篇:
ionic 下拉刷新
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多

































