UILoading 模块demo源码示例

YonBIP社区

UILoading 模块封装了两种款式的加载提示框，每一种款式都提供一个接口来调用。开发者可参考各个接口的样式来自定义加载提示框上的图片信息。

点击进入模块详情

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<style type="text/css">
html{ background-color: white; }
header{ border-bottom: 1px solid #ccc; padding: 25px 0; }
span {
padding: 10px 15px;
margin: 10px;
display: inline-block;
background-color: #e8e8e8;
}
.hover{ opacity: .4; }
</style>
</head>
<body>
<header>
<h1>UILoading</h1>
<mark>
使用前请详细阅读文档使用规则
</mark>
</header>
<span tapmode="hover" onclick="fnFlower()">flower</span>
<span tapmode="hover" onclick="fnKeyFrame()">keyFrame</span>
<span tapmode="hover" onclick="fnCloseFlower()">closeFlower</span>
<span tapmode="hover" onclick="fnCloseKeyFrame()">closeKeyFrame</span>
</body>
<script type="text/javascript">
var UILoading;
apiready = function() {
UILoading = api.require('UILoading');
};
function fnFlower(){
UILoading.flower({
center: {
x: 160,
y: 300
},
size: 30,
fixed: true
}, function(ret){
alert(JSON.stringify(ret));
});
}
function fnKeyFrame(){
UILoading.keyFrame({
rect: {
w: 80,
h: 100
},
styles: {
bg: 'rgba(0,0,0,0.5)',
corner: 5,
interval: 50,
frame:{
w: 80,
h: 80
}
}
}, function(ret){
alert(JSON.stringify(ret));
});
}
function fnCloseFlower(){
UILoading.closeFlower ({
id: 0
});
}
function fnCloseKeyFrame(){
UILoading.closeKeyFrame();
}
</script>
</html>

复制代码

config.xml

复制代码

tanjingwaini

回帖拿金币，支持支持

huanyun-c

回帖拿金币，支持支持

hbshow

感谢分享

SODmi

早一点出来，福利很多人！

sd9999

感觉分享，学习了！！！

不想规则的三角形

回帖拿金币，支持支持

川哥哥

学习学习

神奇的一颗蛋

帖拿金币，支持支持

顽皮的大叔

是不是可以自己做一个动态图，也可以实现这样的效果