ProgressBar¶

简介¶

ProgressBar是进度条控件，一般用于监视操作完成的进度。

sample¶

sample模拟了利用Progressbar和label显示下载进度

控件布局¶

layout

在Page中加入一个label和progressbar。

JS代码¶

var page = {
    timer : 0,
    progress : 0,
    /* 此方法在第一次显示窗体前发生 */
    onLoad:function(event){
        var that = this;
        that.timer = setInterval(function(){
            if(that.progress > 100)
            {
                /*更新下载完成的文本提示，清除定时器*/
                that.setData({label1 : {value : "Downloading complete !!!" ,refresh : true}});
                clearInterval(that.timer);
            }else{
                /*更新progressbar的进度和label的显示文本*/
                that.setData({label1 : {value : "Downloading... "+ that.progress +"%" ,refresh : true}});
                that.setData({progressbar1 : {value : that.progress , refresh : true}});
                that.progress++;
            }   
        },10)
    },
};

效果¶

sample

ProgressBar¶

公共属性¶

控件类型

默认 progressbar，且不可改动。
透明度

设置背景颜色的透明度，范围： 0 ~ 255。也可以在背景颜色中设定。

注：当背景图片的设定不为空时，将自动设置为 0。

名称¶

控件名称

设定控件的名称。

在JS脚本中，可根据控件名称来指定控件，并对其进行设定或操作。

设计¶

控件锁定

选项：True/False

设定该控件是否锁定。

如果设定值为True,则设计器中无法移动该控件。
是否隐藏控件

选项：True/False

设定该控件是否需要隐藏。

如果设定值为True,设计器与实际效果都不会显示该控件及控件中的内容。

当控件已隐藏时，可通过在工程管理器中点击来选中该控件。

数据¶

当前值

设定控件的初始设定值
最大值

设定控件的能够设定范围的最大值。
最小值

设定控件的能够设定范围的最小值。

图片¶

背景图片

设定控件的背景图片，不支持缩放，且居中显示。

外观¶

背景颜色

设定背景颜色，设定背景颜色的ARGB值。

可打开颜色选择器，通过颜色选择器修改RGB值。

Alpha值(即透明度)，可以直接修改设定值或修改透明度的值。背景颜色的透明度与属性透明度的值会自动保持一致。
已完成进度图

设定progressbar中用于显示已完成进度的图片。
方向

选项：水平/垂直

设定控件的布局方向。当设定值为水平时，进度调从左向右显示进度；当设定值为垂直时，进度调从下向上显示进度。
未完成进度图

设定progressbar中用于显示还未完成进度的图片。

位置属性¶

x坐标点

设定控件的左上角相对于父控件的左上角的横坐标。
y坐标点

设定控件的左上角相对于父控件的左上角的纵坐标。
高度

设定控件的高度
宽度

设定控件的宽度

setData¶

控件自有属性

属性名类型描述注解

progress Number ProgressBar控件进度值 ProgressBar 控件有最小值和最大值

setData 设置更改属性示例

示例代码	注解
`this.setData({progressBar1 : 60})`	将 `id` 为 `progressBar1` 的 ProgressBar 控件的进度值置为 60
`this.setData({progressBar1 : {value : 60}})`	将 `id` 为 `progressBar1` 的 ProgressBar 控件的进度值置为 60