waterBallProgress

• Method

open hide setProgress

论坛示例

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

概述

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

模块实现效果图如下：

open

打开进度指示器

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

rect：

• 类型：JSON 对象
• 描述：（可选项）模块位置和大小配置，若不传则取内部字段默认值
• 内部字段：

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 对象
• 描述：（可选项）外部环形样式配置，若不传则不显示外部环形
• 内部字段：

{
     bgColor: '#F0F0F0',        //（可选项）字符串类型；未加载部分的颜色，支持rgb、rgba、#；默认：#F0F0F0
     width: 20,                //（可选项）数字类型；环的粗细；默认：20
     interval: 10,             //（可选项）数字类型；环形和球形的间隔；默认：10
}

labels：

• 类型：数组
• 描述：（可选项）加载指示器上的提示文字配置，若不传则不显示，本参数为一个数组，可配置显示多个提示文字
• 内部字段：

• 类型：数字
• 描述：（可选项）当前的进度，取值范围：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: {
         backWaterColor:'#33cc99',   
         bgColor: 'rgba(0,0,0,0)',
         borderWidth: 0.5,       
         borderColor: '#fff'  
    },
    annulus: {
         activeColor: '#ffffff',    
         bgColor: '#F0F0F0',     
         width: 20,                
         interval: 10,            
    },
    labels: [{
         color: '#ffffff',    
         size: 18,            
         text: 10 ,           
         offset: -50            
    }, {
         color: '#ffffff',    
         size: 30,            
         text: '50%' ,           
         offset: 0            
    }, {
         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()

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

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

hide()

示例代码

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

可用性

可提供的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 一一对应，若为空则保持原值不变
• 示例：

示例代码

var waterBallProgress = api.require('waterBallProgress');
waterBallProgress.setProgress({
    progress: 67,
});

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例