WheelImage

简介

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

Sample

Sample实现了slider与wheelImage关联的功能，wheelImage选中项变化时，Slider随动；Slider也能直接控制wheelImage的选中项。

控件布局

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

JS 代码

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

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

效果

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

• 控件自有属性

  属性名	类型	描述	注解
  select	Number	WheelImage控件当前选中项	值从 0 起，对应第一项

• setData 设置更改属性示例

  示例代码	注解
  this.setData({wheelImage1 : 1})	将 id 为 wheelImage1 的 WheelImage 控件当前选中项置为第二项
  this.setData({wheelImage1 : {value : 1}})	将 id 为 wheelImage1 的 WheelImage 控件当前选中项置为第二项