apiCloud应用笔记(三)————UILoading模块

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模块，官方文档中已经有很详细文档，但是一些细节没有交代清楚，此处做一个笔记和分享。