WheelString

简介

wheelstring是文本滚动控件，与Card类似，但只能存放文本，并自动居中显示,并能同时显示多个。

Sample

Sample利用label和wheelstring实现了简易的时钟设定器。

布局

layout

加入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}});
    }
},

效果

sample

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值有效。

  • 字符合集

    添加控件中需要显示的文本内容，并能够调整顺序。

    并能够批量加入字符合集。

    add

位置属性

  • 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 控件当前选中项置为第二项