ImageBox¶
简介¶
imageBox
是图片盒控件,用于显示图片元素。不可缩放,控件大小将自动设定为图片的大小,但可以更改。
Sample¶
Sample实现根据Textbox
控件修改ImageBox
的显示图片
控件布局¶
在Page中加入Textbox
并把bingchange
属性设置为 onChage,再加入一个Imagebox
,将其透明度
设为0。
注:需要将图片加入图片库中
JS代码¶
onChange:function(event){ //根据Textbox的文本内容,设定Imagebox的显示图片 this.setData({imagebox1 : {value : event.detail.value + ".png", refresh : true}); },
效果¶
ImageBox属性¶
公共属性¶
-
控件类型
默认
imagebox
,且不可改动 -
透明度
设置背景颜色的透明度,范围: 0 ~ 255。也可以在
背景颜色
中设定。注:当
背景图片
的设定不为空时,将自动设置为 0。
名称¶
-
控件名称
设定控件的名称。
在JS脚本中,可根据控件名称来指定控件,并对其进行设定或操作。
设计¶
-
控件锁定
选项:True/False
设定该控件是否锁定。
如果设定值为True,则设计器中无法移动该控件。
-
是否隐藏控件
选项:True/False
设定该控件是否需要隐藏。
如果设定值为True,设计器与实际效果都不会显示该控件及控件中的内容。
当控件已隐藏时,可通过在
工程管理器
中点击来选中该控件。
图片¶
-
背景图片
设定控件的背景图片,不支持缩放,且居中显示。
外观¶
-
背景颜色
设定
背景颜色
,设定背景颜色的ARGB值。可打开颜色选择器,通过颜色选择器修改RGB值。
Alpha值(即透明度),可以直接修改设定值 或 修改
透明度
的值。背景颜色
的透明度与属性透明度
的值会自动保持一致。 -
图片
设定在控件内显示的图片,图片大小为原始大小。当图片大小与控件大小不一致时,图片将居中或显示最中心的图片内容
位置属性¶
-
x坐标点
设定 控件的左上角 相对于 父控件的左上角 的横坐标。
-
y坐标点
设定 控件的左上角 相对于 父控件的左上角 的纵坐标。
-
高度
设定控件的高度
-
宽度
设定控件的宽度
setData¶
-
控件自有属性
属性名 类型 描述 image String ImageBox控件显示图片 -
setData
设置更改属性示例示例代码 注解 this.setData({imagebox1 : 'imagebox.png'})
将 id
为imagebox1
的 ImageBox 控件显示图片设置为imagebox.png
this.setData({imagebox1 : {value : 'imagebox.png'}})
将 id
为imagebox1
的 ImageBox 控件显示图片设置为imagebox.png