首頁技術(shù)文章正文

?移動APP開發(fā)之載入指示器操作指南

更新時(shí)間:2021年09月30日15時(shí)03分來源:傳智教育瀏覽次數(shù):

在移動App中，當(dāng)頁面進(jìn)行耗時(shí)操作時(shí)，可以使用載入指示器提示用戶操作正在進(jìn)行中。載入指示器通常會疊加一個(gè)個(gè)半透明的背景幕來阻止用戶的其他頁面交互。在inic中,使用$ionicLoding服務(wù)提供的兩個(gè)方法操作載入指示器。

.show(options):顯示載入指示器。
.hide():隱藏載入指示器。
在上述方法中,show()方法的options參數(shù)是一個(gè)JSON對象，該對象中可以包含的屬性如表11-14所示。
表11-14options對象屬性
1632983542378_載入指示器.png

接下來通過一個(gè)案例來演示載入指示器的具體用法，如demo11-6.html所示。demo11-6.html所示。

<html>
<head>
<meta charset="uti-8>
<meta name="viewport"content="initial-scale=1,maximum-scale=1,user- scalable=no,width=device-width">
<title>載入指示器</title>
<1ink href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="starter"ng-controller-"myCtr1">
<ion-view>
<ion-header-barclass="royal-bg">
<h1 class="title">菜品種類</h1>
</ion-header-bar>
<ion-list>
<ion-item ng- repeat"item in foods”
<href-"#"> {(item.name）}</ion-item>
</ion-list>
</ion-content>
</ion-view>
</body>
<script type="text/javascript">
angular.module('starter',['ionic'])
.controller('myCtrl',function($scope,$timeout,$ionicLoading){
//顯示載入指示器
$ionicLoading.show({
content:'Loading'，
animation:'fade-in,
showBackdrop:true,
maxWidth:200，
showDelay:0
}) ;
//定時(shí)器設(shè)置加載列表內(nèi)容后隱藏載入指示器
$timeout(function(){
$scope.foods=[{name:魚丸'}，{name:肥牛',{name:菠菜'}];
$ionicLoading.hide();
},2000);
});
</script>
</html>

在上述代碼中,在主界面定義了一個(gè)菜品列表。通過定時(shí)器來模擬延時(shí)加載菜品列表的效果,在列表加載完畢前顯示載入指示器。

第25~31行定義的show()方法用于顯示載入指示器;第33~37行使用定時(shí)器設(shè)置2000ms后為列表添加數(shù)據(jù)，顯示數(shù)據(jù)后隱藏載入指示器。

使用Chrome瀏覽器訪問demol16-.html,可以看到載入指示器(一個(gè)載入圖標(biāo)顯示在背景幕上)。
2000ms后,列表顯示列表數(shù)據(jù)，隱藏載入指示器

移動端touch事件解析判斷拖動方向

前端與移動開發(fā)：Js中調(diào)試小技巧tips---斷點(diǎn)調(diào)試

怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)？

傳智教育web前端與移動開發(fā)培訓(xùn)

上一篇：圖片懶加載實(shí)現(xiàn)原理？如何實(shí)現(xiàn)懶加載？ 下一篇：為什么要使用IndexedDB？IndexedDB有哪些特點(diǎn)？