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

本文链接：https://blog.csdn.net/yyzp1993/article/details/76850221

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