Button¶
简介¶
Button
是按钮控件。当该控件被触碰到时,能够触发相应的事件。
Sample¶
演示Button
控件触发tap事件的效果,当Button
被按下时,控件的文本将更换为after
。
控件布局¶
Button
控件的bingtap
属性设置为onBtn
,控件文本
设置为Before
。
JS 代码¶
Button触发的事件函数如下:
onBtn : function(event){ // 设定控件的文本内容,并更新 this.setData({button1 : {value : 'after',refresh: true}}); }
效果¶
Button 属性¶
公共属性¶
-
控件类型
默认
button
,且不可改动。 -
透明度
设置背景颜色的透明度,范围: 0 ~ 255。也可以在
背景颜色
中设定。注:当
背景图片
的设定不为空时,将自动设置为 0。
名称¶
-
控件名称
设定控件的名称。
在JS脚本中,可根据控件名称来指定控件,并对其进行设定或操作。
设计¶
-
控件锁定
选项:True/False
设定该控件是否锁定。
如果设定值为True,则设计器中无法移动该控件。
-
是否隐藏控件
选项:True/False
设定该控件是否需要隐藏。
如果设定值为True,设计器与实际效果都不会显示该控件及控件中的内容。
当控件已隐藏时,可通过在
工程管理器
中点击来选中该控件。
调用属性¶
-
bindtap
绑定tap事件,如果设定值为onTap时,当
button
控件被按下(即触碰)到时,将调用JS脚本中的Page对象中的onTap函数。
图片¶
-
背景图片
设定控件的背景图片,不支持缩放,且居中显示。
外观¶
-
背景颜色
设定
背景颜色
,设定背景颜色的ARGB值。可打开颜色选择器,通过颜色选择器修改RGB值。
Alpha值(即透明度),可以直接修改设定值 或 修改
透明度
的值。背景颜色
的透明度与属性透明度
的值会自动保持一致。 -
点击图片
设定当
button
被按下时,显示的图片 -
前景色
设定控件中文本内容的颜色,设定值为ARGB值。
可打开颜色选择器,通过颜色选择器修改设定RGB值。
Alpha值(即透明度)需要通过手动修改设定。
当
字体
为点阵字体时(自带字体库均为点阵字体),alpha值设定无效。当字体为ttf字体时,alpha值有效 -
显示图片
设定当
button
不处于按下状态时,显示的图片
位置属性¶
-
x坐标点
设定 控件的左上角 相对于 父控件的左上角 的横坐标。
-
y坐标点
设定 控件的左上角 相对于 父控件的左上角 的纵坐标。
-
高度
设定控件的高度
-
宽度
设定控件的宽度
文本¶
-
控件文本
设定控件上显示的文本内容。当
字体
选项为asc 点阵字体
时,无法显示非英文字符。 -
文本对齐
选项 : TopLeft/TopMiddle/TopRight/CenterLeft/CenterMiddle/CenterRight/BottomLeft/BottomMiddle/BottomRight
设定文本内容在控件中的对齐方式。
-
字体
设定文本字体。
自带
点阵
字体,字体大小为16
,不可更改,否则会显示错误。如果想要设定其他字体,请先在字体库中添加对应的ttf文件。
-
字体大小
设定文本内容的字体大小。
长按功能¶
-
间隔(毫秒)
设定当
使能长按
为True,且使能单次
为Flase时,触发tap事件的时间间隔 -
使能单次
选项: True/False
设定当
使能长按
为True时,Tap事件是否仅触发一次。 -
使能长按
选项: True/False
设定控件时候能够长按。
setData¶
-
控件自有属性
属性名 类型 描述 注解 text String Button控件文本 norImg Object Button控件默认显示图片 downImg Object Button控件按下时显示图片 -
setData
设置更改属性示例示例代码 注解 this.setData({button1 : 'Button'})
将 id
为button1
的 Button 控件文本设置为Button
this.setData({button1 : {value : 'Button'}})
将 id
为button1
的 Button 控件文本设置为Button
this.setData({button1 : {norImg :'nor.png'}})
将 id
为button1
的 Button 控件默认显示图片设置为nor.png
this.setData({button1 : {downImg :'down.png'}})
将 id
为button1
的 Button 控件按下时显示图片设置为down.png