WheelImage

简介

wheelimage 是图片滚动控件,与 Card 类似,但只能存放图片,并自动居中显示,且能同时显示多个。

wheelimage 的基类是 widget , widget 属性及接口详细请查看 widget 控件介绍。基础属性中某些属性在 wheelimage 控件中无效(可以设置这类接口属性,但并无效果,显示状态上并无任何变化,因此可以忽略此类属性),不可用属性有:

  • foreground:前景色属性
  • font:字体属性
  • textAlign:文本对齐方式

WheelImage 属性

公共属性

  • 控件类型

    默认 wheelimage,且不可改动

  • 透明度

    设置背景颜色的透明度,范围: 0 ~ 255。也可以在背景颜色中设定。

    注:当背景图片的设定不为空时,将自动设置为 0。

名称

  • 控件名称

    设定控件的名称。

    在JS脚本中,可根据控件名称来指定控件,并对其进行设定或操作。

设计

  • 控件锁定

    选项:True/False

    设定该控件是否锁定。

    如果设定值为 True,则设计器中无法移动该控件。

  • 是否隐藏控件

    选项:True/False

    设定该控件是否需要隐藏。

    如果设定值为 True,设计器与实际效果都不会显示该控件及控件中的内容。

    当控件已隐藏时,可通过在工程管理器中双击来选中该控件。

调用属性

  • bindchange

    绑定 change 事件,如果设定值为 onChange 时,当 wheelimage 的选中图片被通过触控方式改变后,将调用 JS 脚本中的 Page 对象中的 onChange 函数。

  • bindtap

    绑定 tap 事件,如果设定值为 onTap 时,当 wheelimage 被触碰到后,将调用 JS 脚本中的 Page 对象中的 onTap 函数。

注意:以上两个事件不会同时触发。如果两个事件同时绑定了对应 JS 脚本函数,按下并松开时,如果选中图片没有被改变则触发 tap 事件,如果选中图片发生了变化,则触发 change 事件

图片

  • 背景图片

    设定控件的背景图片,不支持缩放,且居中显示。

外观

  • 背景颜色

    设定背景颜色,设定背景颜色的 ARGB 值。

    可打开颜色选择器,通过颜色选择器修改 RGB 值。

    Alpha 值(即透明度),可以直接修改设定值 或 修改透明度的值。背景颜色的透明度与属性透明度的值会自动保持一致。

  • 方向

    选项: 水平/垂直

    设定控件内元素切换的方向。

  • 前景图片

    设定前景图片,前景图片在这控件的最顶层的图层。

  • 图片文件集

    添加需要播放图片文件,并能够调整顺序。

  • 显示个数

    设定控件内能同时显示元素的个数。

  • 选中大小

    设定选中元素(即最中间的元素)的尺寸大小。

  • 选中项

    设定控件初始选中元素。

  • 正常大小

    设定非选中元素(即最中间的元素)的尺寸大小。

位置属性

  • x坐标点

    设定 控件的左上角 相对于 父控件的左上角 的横坐标。

  • y坐标点

    设定 控件的左上角 相对于 父控件的左上角 的纵坐标。

  • 高度

    设定控件的高度

  • 宽度

    设定控件的宽度

setData

  • 控件自有属性

    属性名 类型 描述 注解
    value Number WheelImage 控件当前选中项 值从 0 起,对应第一项
    radius Number 图片集绘制位置 图片集围绕以该值为半径绘制的圆显示
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({wheelImage1 : 1}) idwheelImage1 的 WheelImage 控件当前选中项置为第二项
    this.setData({wheelImage1 : {value : 1}}) idwheelImage1 的 WheelImage 控件当前选中项置为第二项
    this.setData({wheelImage1 : {radius : 150}}) 在半径为 150 像素的圆的左半圆绘制图片集; 正值为左半圆, 负值为右半圆

Sample

Sample实现了 sliderwheelImage 关联的功能,wheelImage 选中项变化时,Slider 随动;Slider 也能直接控制 wheelImage 的选中项。

控件布局

layout

在Page中加入 wheelImage 控件,插入N张图片,bingchange 属性设定为 onWheelChange;加入Slider 控件,范围设定为 0 ~ N-1bingchange 属性设定为 onSliderChange。

JS 代码

/*根据Slider当前值设定WheelImage显示图片序号*/
onSliderChange : function(event) {
    this.setData({WheelImage1 : {value : event.detail.value }});
},

/*根据WheelImage显示图片序号设定Slider的当前值*/
onWheelChange : function(event) {
    this.setData({slider1 : {value : event.detail.value }});
}

效果

layout