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);
};
}])
显示效果如下图所示:
作者最新文章
荣耀MagicOS 11发布计划与Agent Harness架构解析
2026-09-08 19:23
AI重构企业业务架构:超聚变“智企”范式核心解析
2026-09-08 18:39
PDF合并工具怎么选?在线合并5步实操指南
2026-09-04 17:05
PDF图片压缩工具推荐与批量处理实操指南
2026-09-03 12:14
照片如何转成PDF格式?三种图片转PDF操作方法
2026-09-03 11:04
上一篇:
ionic 下拉刷新
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多


































