UILoading模块是apicloud提供的一款Loading作用的模块,封装了两种款式的加载提示框,分别为flower(简单菊花载入效果)和keyFrame(图片切换载入效果)
1.配置
和其他apicloud模块一样。使用UILoading模块,首先需要在项目的应用控制台中添加该模块,这部分操作参见官网的”模块使用流程”
2.flower加载提示框
打开flower提示框
var UILoading = api.require('UILoading'); //声明UILoading对象 UILoading.flower({ //打开加载提示框 center: { //提示框提示图标的中心点坐标 x: api.winWidth/2.0, y: api.winHeight/2.0 }, size: 30, //加载提示框所处正方形的边长 mask: rgba(0,0,0,0.5) //遮罩层 fixed: true //是否将模块视图固定到窗口上(不跟随窗口上下滚动) }, function(ret) { alert(JSON.stringify(ret)); //ret将返回 flower加载提示框的 id });
关闭flower提示框
uiloading.closeFlower({ id: 1 //关闭id 号对应加载提示框 });
注:同一个页面可打开多个提示框,用id控制关闭
3.keyFrame加载提示框
flower提示框只能使用自定义的简陋样式,当需求明确规定载入中样式时,需要用keyFrame来完成,示例如下:
打开keyFrame
var activity = api.require('UILoading'); //声明uiLoading对象 activity.keyFrame({ rect: { //加载提示框提示的尺寸大小 w: 80, h: 100 }, mask : 'rgba(0,0,0,0.5)', //遮罩层 content: [ //组成加载状态动画的关键帧图片路径数组,不传则显示默认图标 { frame:'widget://image/loadingImg/orange1.png' }, { frame:'widget://image/loadingImg/orange2.png' }, { frame:'widget://image/loadingImg/orange3.png' } ], styles: { //加载提示框样式配置 bg: 'rgba(0,0,0,0.5)', //加载提示框整体背景颜色配置 corner: 5, //背景圆角大小 interval: 50, //每帧间隔时长 frame: { //加载框内图标的大小配置 w: 80, //加载框内图标的宽度 h: 80 //加载框内图标的高度 } } }, function(ret) { alert(JSON.stringify(ret)); });
关闭keyFrame
var uiloading = api.require('UILoading'); uiloading.closeKeyFrame();
注:content中可以放置png格式的图片,不可使用gif等动图,可将加载动画分为几帧来存入展示。
关于UILoading模块,官方文档中已经有很详细文档,但是一些细节没有交代清楚,此处做一个笔记和分享。