waterBallProgress

open

close

hide

show

setProgress

论坛示例

为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码，供您参考。

概述

waterBallProgress 是一个球形+环形进度指示器，开发者可通过配置相应参数来自定义显示环形，以及球形内水波的颜色等各种样式。打开本插件时，相当于 open 一个 frame，开发者可自定义起位置、大小。

插件实现效果图如下：

图片说明

open

打开进度指示器

open({params}, callback(ret, err))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）插件位置和大小配置，若不传则取内部字段默认值
  • 内部字段：
{
     centerX: 100,   //（可选项）数字类型：插件中心点x坐标（相对于所属的 Window 或 Frame）；默认：所属 window 或 frame 的中点x坐标
     centerY: 100,   //（可选项）数字类型；插件中心点y坐标（相对于所属的 Window 或 Frame）；默认：所属 window 或 frame 的中点y坐标
     radius: 120     //（可选项）数字类型；插件半径，若带最外层圆环则本半径包括圆环部分；默认：所属window或frame的宽和高度取最小值然后除以2.0
}

ball：

  • 类型：JSON 对象
  • 描述：（可选项）中间水球样式配置，若不传则取内部字段默认值
  • 内部字段：
{
     waterColor: '#90EE90',    //（可选项）字符串类型；球内水的颜色，支持rgb、rgba、#；默认：#90EE90
     backWaterColor:'#33cc99' //（可选项）字符串类型；球内后波浪水的颜色，支持rgb、rgba、#；默认：#33cc99(仅iOS可以用)
     bgColor: 'rgba(0,0,0,0)', //（可选项）字符串类型；球内背景色，支持rgb、rgba、#；默认：rgba(0,0,0,0)
     borderWidth: 0.5,         //（可选项）数字类型；球的边框粗细；默认：0.5
     borderColor: '#fff'       //（可选项）字符串类型；球边框的颜色，支持rgb、rgba、#；默认：#fff
}

annulus：

  • 类型：JSON 对象
  • 描述：（可选项）外部环形样式配置，若不传则不显示外部环形
  • 内部字段：
{
     activeColor: '#ffffff',    //（可选项）字符串类型；已加载部分的颜色，支持rgb、rgba、#；默认：#fff
     bgColor: '#F0F0F0',        //（可选项）字符串类型；未加载部分的颜色，支持rgb、rgba、#；默认：#F0F0F0
     width: 20,                //（可选项）数字类型；环的粗细；默认：20
     interval: 10,             //（可选项）数字类型；环形和球形的间隔；默认：10
}

labels：

  • 类型：数组
  • 描述：（可选项）加载指示器上的提示文字配置，若不传则不显示，本参数为一个数组，可配置显示多个提示文字
  • 内部字段：
[{
     color: '#ffffff',    //（可选项）字符串类型；提示文字的颜色，支持rgb、rgba、#；默认：#fff
     size: 14,            //（可选项）数字类型；提示文字的大小；默认：20
     text: '10%' ,        //（可选项）字符串类型；提示文字的文本内容
     offset: 0            //（可选项）数字类型；提示文字所占区域的锚点距离插件锚点的偏移量，取值范围：-radius到+radius(中间点是0,向下取正,向上取负 )；默认：0
}]

progress：

  • 类型：数字
  • 描述：（可选项）当前的进度，取值范围：0-100
  • 默认：0

fixedOn：

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

fixed:

  • 类型：布尔
  • 默认值：true
  • 描述：是否将插件视图固定到窗口上，不跟随窗口上下滚动，可为空

callback(ret, err)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    status:           //布尔类型；插件是否打开成功，true|false 如果插件已经成功打开,第二次调用open时会直接返回true.
}

示例代码

var waterBallProgress = api.require('waterBallProgress');
waterBallProgress.open({
    rect: {
         centerX: 100,   
         centerY: 100,   
         radius: 120     
    },
    ball: {
         waterColor: '#90EE90',
         backWaterColor:'#33cc99',   
         bgColor: 'rgba(0,0,0,0)',
         borderWidth: 0.5,       
         borderColor: '#fff'  
    },
    annulus: {
         activeColor: '#ffffff',    
         bgColor: '#F0F0F0',     
         width: 20,                
         interval: 10,            
         intervalColor: 'rgba(0,0,0,0)'
    },
    labels: [{
         color: '#ffffff',    
         size: 18,            
         text: 10 ,           
         offset: -50            
    }, {
         color: '#ffffff',    
         size: 30,            
         text: '50%' ,           
         offset: 0            
    }, {
         color: '#ffffff',    
         size: 18,            
         text: 10 ,           
         offset: 50            
    }],
    progress: 50,
    fixedOn: api.frameName,
    fixed: false
}, function(ret, err) {
    if(ret.status){
       alert("创建成功");
    }else{
       alert("创建失败");
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭插件

close()

示例代码

var waterBallProgress = api.require('waterBallProgress');
waterBallProgress.close();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏已经打开并显示的插件，并未从内存里清除

hide()

示例代码

var waterBallProgress = api.require('waterBallProgress');
waterBallProgress.hide();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示已隐藏的插件

show()

示例代码

var waterBallProgress = api.require('waterBallProgress');
waterBallProgress.show();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setProgress

设置进度值及提示文字

setProgress({params})

params

progress：

  • 类型：数字
  • 描述：（可选项）设置的值
  • 默认值：0

labels：

  • 类型：数组
  • 描述：（可选项）加载指示器上的提示文字更新，若不传则不显示，本参数为一个数组，可配置显示多个提示文字，起顺序与 open 接口内的 labels 一一对应，若为空则保持原值不变
  • 示例：
['','67%','','6小时30分']

示例代码

var waterBallProgress = api.require('waterBallProgress');
waterBallProgress.setProgress({
    progress: 67,
    labels: ['','67%','','6小时30分']
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

为帮助用户更好更快的使用插件，论坛维护了一个示例，示例中包含示例代码，供您参考。

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