ProgressBar¶
简介¶
ProgressBar
是进度条控件,一般用于监视操作完成的进度。
sample¶
sample模拟了利用Progressbar
和label
显示下载进度
控件布局¶
在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) }, };
效果¶
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 控件的进度值置为 60this.setData({progressBar1 : {value : 60}})
将 id
为progressBar1
的 ProgressBar 控件的进度值置为 60