UILoading

来自于：官方立即使用

• Method

flower keyFrame closeFlower closeKeyFrame

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

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

示例图：

实例widget下载地址

模块接口

flower

打开 flower 样式的加载提示框。此样式接口封装了一种常见的“旋转菊花”型加载提示框，开发者只需自定义此加载提示框的位置及尺寸即可。同一个页面可打开多个该样式加载提示框，用 id 区分。

open({params},callback(ret))

params

center：

• 类型：JSON 类型
• 描述：（可选项）提示框提示图标的中心点坐标
• 内部字段：

{
    x: api.winWidth/2.0,           //（可选项）数字类型；模块中心点的 x 坐标（相对于所属的 Window 或 Frame）；默认值：api.winWidth/2.0
    y: api.winHeight/2.0           //（可选项）数字类型；模块中心点的 y 坐标（相对于所属的 Window 或 Frame）；默认值：api.winHeight/2.0
}

size：

• 类型：数字类型
• 描述：（可选项）加载提示框所处正方形的边长
• 默认：30

mask：

• 类型：字符串类型
• 描述：（可选项）遮罩层配置，支持#、rgb、rgba，若不传则无遮罩层
• 默认：rgba(0,0,0,0)

fixedOn：

• 类型：字符串类型
• 描述：（可选项）模块视图添加到指定 frame 的名字（只指 frame，传 window 无效）
• 默认：模块依附于当前 window

fixed:

• 类型：布尔
• 描述：（可选项）是否将模块视图固定到窗口上（不跟随窗口上下滚动）
• 默认值：true

callback

ret：

• 类型：JOSN 对象
• 内部字段：

{
     id:             //数字类型；打开 flower 加载提示框的 id
}

示例代码

var UILoading = api.require('UILoading');
UILoading.flower({
    center: {
        x: 160,
        y: 240
    },
    size: 30,
    fixed: true
}, function(ret) {
    alert(JSON.stringify(ret));
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

keyFrame

打开关键帧样式的加载提示框。该样式的加载提示框以播放一组关键帧图片的形式来呈现加载过程，该图片数组可通过 content 参数配置。

params

rect：

• 类型：JSON 类型
• 描述：（可选项）加载提示框提示的尺寸大小
• 内部字段：

{
    w: 80,         //（可选项）数字类型；模块的宽度；默认值：80
    h: 100         //（可选项）数字类型；模块的高度；默认值：100
}

styles:

• 类型：JSON 对象
• 描述：加载提示框样式配置
• 内部字段

{
    bg: 'rgba(0,0,0,0.5)',             //（可选项）字符串类型；加载提示框整体背景颜色配置，支持#、rgb、rgba、img；默认：'rgba(0,0,0,0.5)
    corner: 5,                         //（可选项）数字类型；背景圆角大小；默认：5.0
    interval: 50,                      //（可选项）数字类型；每帧间隔时长，单位：毫秒；默认：50
    frame:{                            // JSON 对象；加载框内图标的大小配置
        w: 80,                         //（可选项）加载框内图标的宽度；默认：80
        h: 80                          //（可选项）加载框内图标的高度；默认：h
    }
}

content:

• 类型：数组
• 描述：（可选项）组成加载状态动画的关键帧图片路径数组，不传则显示默认图标
• 默认：默认图标
• 内部字段：

[{
     frame: ''     //字符串类型；加载状态动画的关键帧图片路径；
}]

mask：

• 类型：字符串类型
• 描述：（可选项）遮罩层配置，支持#、rgb、rgba，若不传则无遮罩层
• 默认：rgba(0,0,0,0)

示例代码

var activity = api.require('UILoading');
activity.keyFrame({
    rect: {
        w: 80,
        h: 100
    },
    styles: {
        bg: 'rgba(0,0,0,0.5)',
        corner: 5,
        interval: 50,
        frame: {
            w: 80,
            h: 80
        }
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

closeFlower

关闭打开的加载提示框

closeFlower ({params})

params

id:

• 类型：数字类型
• 描述：关闭 flower 接口打开的 id 号对应加载提示框

示例代码

var uiloading = api.require('UILoading');
uiloading.closeFlower({
    id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

closeKeyFrame

关闭打开的加载提示框

closeKeyFrame ()

示例代码

var uiloading = api.require('UILoading');
uiloading.closeKeyFrame();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本