WheelString¶
简介¶
wheelstring
是文本滚动控件,与Card
类似,但只能存放文本,并自动居中显示,并能同时显示多个。
Sample¶
Sample利用label
和wheelstring
实现了简易的时钟设定器。
布局¶
加入2个wheelstring
控件,字符集分别设置为"00"~"23"
和"00"~"59"
,并在bingchange
属性中设定onchage,并且传递文本
属性选择为True
。
JS代码¶
onChange:function(event){ //获取控件当前显示的文本内容 var time = event.detail.value; /*根据不同的wheelstring,设置不同的label显示文本*/ if(event.target.id == "WheelString1") { this.setData({label1 : {value : time , refresh : true}}); }else if(event.target.id == "WheelString2"){ this.setData({label2 : {value : time , refresh : true}}); } },
效果¶
WheelString 属性¶
公共属性¶
-
控件类型
默认
wheelstring
,且不可改动 -
透明度
设置背景颜色的透明度,范围: 0 ~ 255。也可以在
背景颜色
中设定。注:当
背景图片
的设定不为空时,将自动设置为 0。
名称¶
-
控件名称
设定控件的名称。
在JS脚本中,可根据控件名称来指定控件,并对其进行设定或操作。
设计¶
-
控件锁定
选项:True/False
设定该控件是否锁定。
如果设定值为True,则设计器中无法移动该控件。
-
是否隐藏控件
选项:True/False
设定该控件是否需要隐藏。
如果设定值为True,设计器与实际效果都不会显示该控件及控件中的内容。
当控件已隐藏时,可通过在
工程管理器
中双击来选中该控件。
调用属性¶
-
bindchange
绑定change事件,如果设定值为onChange时,当
wheelstring
的选中文本被通过触控方式改变后,将调用JS脚本中的Page对象中的onChange函数。
图片¶
-
背景图片
设定控件的背景图片,不支持缩放,且居中显示。
外观¶
-
背景颜色
设定
背景颜色
,设定背景颜色的ARGB值。可打开颜色选择器,通过颜色选择器修改RGB值。
Alpha值(即透明度),可以直接修改设定值 或 修改
透明度
的值。背景颜色
的透明度与属性透明度
的值会自动保持一致。 -
文本传递
选项 : true/false
当为
True
时,事件函数返回的对象event中,event.detail.value
为文本内容,类型为String
; 当为False
时,事件函数返回的对象event中,event.detail.value
为序号,类型为number
。 -
方向
选项: 水平/垂直
设定控件内元素切换的方向。
-
前景图片
设定前景图片,前景图片在这控件的最顶层的图层。
-
显示个数
设定控件内能同时显示元素的个数。
-
选中大小
设定选中元素与相邻元素之间的间隔大小。
-
选中项
设定控件初始选中元素。
-
选中颜色
设定控件中选中项的文本内容的颜色,设定值为ARGB值。
可打开颜色选择器,通过颜色选择器修改设定RGB值。
Alpha值(即透明度)需要通过手动修改设定。
当
字体
为点阵字体时(自带字体库均为点阵字体),alpha值设定无效。当字体为ttf字体时,alpha值有效。 -
正常大小
设定非选中元素之间的间隔大小。
-
正常颜色
设定控件中非选中项的文本内容的颜色,设定值为ARGB值。
可打开颜色选择器,通过颜色选择器修改设定RGB值。
Alpha值(即透明度)需要通过手动修改设定。
当
字体
为点阵字体时(自带字体库均为点阵字体),alpha值设定无效。当字体为ttf字体时,alpha值有效。 -
字符合集
添加控件中需要显示的文本内容,并能够调整顺序。
并能够批量加入字符合集。
位置属性¶
-
x坐标点
设定 控件的左上角 相对于 父控件的左上角 的横坐标。
-
y坐标点
设定 控件的左上角 相对于 父控件的左上角 的纵坐标。
-
高度
设定控件的高度
-
宽度
设定控件的宽度
文本¶
-
字体
设定文本字体。
自带
asc
和hz
的12、16号点阵字体,asc
不支持非英文字符,hz
支持中文字符。字体大小
仅能设定为12,16,否则会显示错误。如果想要设定其他字体,请先在字体库中添加对应的ttf文件。
-
字体大小
设定文本内容的字体大小。
setData¶
-
控件自有属性
属性名 类型 描述 注解 select Number WheelString控件当前选中项 值从 0
起,对应第一项 -
setData
设置更改属性示例示例代码 注解 this.setData({wheelString1 : 1})
将 id
为wheelString1
的 WheelString 控件当前选中项置为第二项this.setData({wheelString1 : {value : 1}})
将 id
为wheelString1
的 WheelString 控件当前选中项置为第二项