UILoading

来自于:官方

概述

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
        }
    }
}, function(ret) {
    alert(JSON.stringify(ret));
});

可用性

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及更高版本