移动端开发中 Ionic中$ionicLoading 和 $ionicBackdrop 两种遮罩层的用法

最新推荐文章于 2024-12-22 06:07:40 发布

Olivia-yu

最新推荐文章于 2024-12-22 06:07:40 发布

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Olivia_Yu_/article/details/71884198

本文详细对比了Ionic框架中的$ionicLoading与$ionicBackdrop两个指令的使用场景与实现效果，并提供了示例代码。$ionicLoading用于显示带有消息的加载提示框，而$ionicBackdrop仅提供背景遮罩层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先给大家分享下ionic的网站，适合像这样的天气坐在家里研究代码~

http://www.ionic.wang/

博主是个比较糙妹子，永远都是言简意骇，怎么说呢，一句话来解释$ionicLoading 和 $ionicBackdrop的区别就是：$ionicLoading 是带有弹出窗口的，而$ionicBackdrop只有一个遮罩层，二话不说先上图；

$ionicLoading 的效果图

$ionicBackdrop 效果图

$ionicLoading代码如下：

<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title></title>
		<link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css" />
		<script src="js/lib/ionic1/js/ionic.bundle.min.js"></script>
	</head>
	<body ng-controller="myCtrl">
		<!--页头-->
		<ion-header-bar align-title="center" class='bar-balanced'>
			<div class="buttons">
				<button class="button" ng-click="dosomthing()">左侧按钮</button>
			</div>
			<h1 class="title">页头标题</h1>
			<div class="buttons">
				<button class="button" ng-click='dosomting()'>右侧按钮</button>		
			</div>
		</ion-header-bar>
		<!--<!pulling-icon="icon ionperson"--加加载图标-->
		<!--on-refresh="refresh()"加载执行函数-->
		
		
		<!--内容部分-->
		<ion-content>
			<ion-refresher pulling-icon="icon ion-person" pulling-text="下拉刷新。。" on-refresh="refresh()" refreshing-text="正在刷新请稍后...">				
			</ion-refresher>
			
			<div class="list">
				<div ng-repeat="g in good"class="item">
			    	<span ng-bind="g"></span>
			    </div>
			</div>
		</ion-content>
		
		<!--脚注部分-->
		<ion-footer-bar align-text="left" class="bar-dark">
			<h1 class="title">页脚部分</h1>
		</ion-footer-bar>
	</body>
</html>

<script>
		var app=angular.module("myApp",["ionic"]);
		
		app.controller("myCtrl",function($scope,$ionicLoading,$timeout){
			$scope.good=[];
			for(var i=0;i<20;i++){
				$scope.good.push("item lin"+i);
			}	
			$scope.refresh=function(){
				console.log("正在刷新页面数据");
				$scope.good=[];
				for(var i=0;i<20;i++){
					$scope.good.push("new item lin"+i);
				}
			$ionicLoading.show({
				template:"页面正在刷新中..."
			})
			$timeout(function(){
				$ionicLoading.hide();
			},2000)				
			$scope.$broadcast("scroll.refreshComplete");
			}
		})
		
</script>

$ionicBackdrop代码如下：

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title></title>
		<link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css" />
		<script src="js/lib/ionic1/js/ionic.bundle.min.js"></script>
	</head>
	<body ng-controller="myCtrl">
		<!--页头-->
		<ion-header-bar align-title="center" class='bar-balanced'>
			<div class="buttons">
				<button class="button" ng-click="dosomthing()">左侧按钮</button>
			</div>
			<h1 class="title">页头标题</h1>
			<div class="buttons">
				<button class="button" ng-click='dosomting()'>右侧按钮</button>		
			</div>
		</ion-header-bar>
		<!--<!pulling-icon="icon ionperson"--加加载图标-->
		<!--on-refresh="refresh()"加载执行函数-->
		<!--内容部分-->
		<ion-content>
			<ion-refresher pulling-icon="icon ion-person" pulling-text="下拉刷新。。" on-refresh="refresh()" refreshing-text="正在刷新请稍后...">
				
			</ion-refresher>
			    <div class="list">
			    	<div ng-repeat="g in good"class="item">
			    		<span ng-bind="g"></span>
			    	</div>
			    </div>
		</ion-content>
		
		<!--脚注部分-->
		<ion-footer-bar align-text="left" class="bar-dark">
			<h1 class="title">页脚部分</h1>
		</ion-footer-bar>
	</body>
</html>

<script>
		var app=angular.module("myApp",["ionic"]);
		
		app.controller("myCtrl",function($scope,$timeout,$ionicBackdrop){
			$scope.good=[];
			
			for(var i=0;i<20;i++){
				$scope.good.push("item lin"+i);
			}
			
			$scope.refresh=function(){
				console.log("正在刷新页面数据");
				$scope.good=[];
				for(var i=0;i<20;i++){
					$scope.good.push("new item lin"+i);
				}
				$ionicBackdrop.retain();
				$timeout(function(){
					$ionicBackdrop.release();
				},1000)
				
			$scope.$broadcast("scroll.refreshComplete");
				
			}
		})	
</script>

闲暇时刻整理出来的小零碎，希望能够帮您解决问题；