UILoading

flower closeFlower

论坛示例

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

概述

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

示例图：

模块接口

flower

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

open({params},callback(ret))

params

center：

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

size：

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

描述：（可选项）遮罩层配置，支持#、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,
}, function(ret) {
    alert(JSON.stringify(ret));
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

keyFrame

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

params

rect：

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

styles:

描述：加载提示框样式配置
内部字段

{
    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
    }
}

content:

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

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

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

示例代码

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 ()

uiloading.closeKeyFrame();

可用性

可提供的1.0.0及更高版本