CircleProgress

简介

CircleProgress是环状进度条控件,一般用于监视操作完成的进度,并且它时一种容器控件

sample

sample模拟了利用CircleProgresslabel显示下载进度

控件布局

layout

在Page中加入一个labelCircleProgress

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{
                /*更新CircleProgress的进度和label的显示文本*/
                that.setData({label1 : {value : "Downloading... "+ that.progress +"%" ,refresh : true}});
                that.setData({CircleProgress1 : {value : that.progress , refresh : true}});
                that.progress++;
            }   
        },10)
    },
};

效果

sample

CircleProgress

公共属性

  • 控件类型

    默认 CircleProgress,且不可改动。

  • 透明度

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

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

名称

  • 控件名称

    设定控件的名称。

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

设计

  • 控件锁定

    选项:True/False

    设定该控件是否锁定。

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

  • 是否隐藏控件

    选项:True/False

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

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

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

数据

  • 当前值

    设定控件的初始设定值。

  • 内径

    设定CircleProgress的内经,不显示以中心点为圆心,内经为半径的范围内的进度图元素。

  • 起始角度

    设定进度0显示的起始角度。

  • 外径

    设定CircleProgress的外经,不显示以中心点为圆心,外经为半径的范围外的进度图元素。

  • 最大值

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

  • 最小值

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

图片

  • 背景图片

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

外观

  • 背景颜色

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

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

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

  • 进度图

    设定CircleProgress中表示进度的图片元素。

位置属性

  • x坐标点

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

  • y坐标点

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

  • 高度

    设定控件的高度

  • 宽度

    设定控件的宽度

setData

  • 控件自有属性

    属性名 类型 描述 注解
    progress Number CircleProgress控件进度值 CircleProgress 控件有最小值和最大值
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({CircleProgress1 : 60}) idCircleProgress1 的 CircleProgress 控件的进度值置为 60
    this.setData({CircleProgress1 : {value : 60}}) idCircleProgress1 的 CircleProgress 控件的进度值置为 60