UILoading

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)

isGradual：

  • 类型：布尔类型
  • 描述：（可选项）是否渐变显示 ；
  • 默认：false

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) {
    api.alert({
            msg: 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)

isGradual：

  • 类型：布尔类型
  • 描述：（可选项）是否渐变显示 ；
  • 默认：false

示例代码

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 号对应加载提示框

isGradual：

  • 类型：布尔类型
  • 描述：（可选项）是否渐变消失 ；
  • 默认：false

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

# **closeKeyFrame**

关闭打开的加载提示框

closeKeyFrame ({params})

params

isGradual：

  • 类型：布尔类型
  • 描述：（可选项）是否渐变消失 ；
  • 默认：false

示例代码

var uiloading = api.require('UILoading');
uiloading.closeKeyFrame({
    isGradual: false
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24