Card

简介

Card控件，它是一种容器控件，能够存放多个控件,但每个控件是独立显示的(当然，这个控件也可以是个容器控件)，可以通过左右或上下翻动Card控件显示Card中不同的页面，也可选择是否循环。

每个子控件的尺寸将自动设定为card的尺寸。

Sample

sample实现类似手机屏幕切换效果，是主要是通过card,dotIndicator和panel这几个控件实现。

控件布局:

• card和dotIndicator的属性如下：

其中card的调用属性中，给bindchange设置为onChange，之后我们会在JS代码中实现该函数。

在Page中添加card和dotIndicator，再往card中添加3个panel，每个panel中放一个ImageBox(可根据自身需求增加多个其他控件),并自定义UI风格。

JS代码

onChange : function(event){
    // DotIndicator控件，随着card控件显示项的改变而改变
    this.setData({DotIndicator1 : {value : event.detail.value, refresh: true}})
},

效果

Card 属性

公共属性

• 控件类型

  默认 card，且不可改动

• 透明度

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

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

名称

• 控件名称

  设定控件的名称。

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

设计

• 控件锁定

  选项：True/False

  设定该控件是否锁定。

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

• 是否隐藏控件

  选项：True/False

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

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

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

调用属性

• bindchange

  绑定change事件，如果设定值为onChange时，当Card的显示元素发生变化时，将调用JS脚本中的Page对象中的onChange函数。

图片

• 背景图片

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

外观

• 背景颜色

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

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

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

• 当前控件序号

  显示当前控件序号 或 根据序号设定在设计器中card当前显示的控件。范围：0 ~ (控件数 -1)。

• 当前控件名称

  显示当前控件名称 或 根据控件名称设定设计器中card当前显示控件。设定名称必须为其中一个子控件中的名称。

• 多重子控件

  选项： True/False

  设定在设计器中，是否能够在card的子控件中(这个控件是个容器控件)再添加子控件。

• 方向

  选项：水平/垂直/水平回环/垂直回环

  设定card的切换方向 和 是否循环。

• 选中项

  设定card初始化时显示的控件序号。

位置属性

• x坐标点

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

• y坐标点

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

• 高度

  设定控件的高度

• 宽度

  设定控件的宽度

setData

• 控件自有属性

  属性名	类型	描述	注解
  showItem	Number	Card控件显示切换	显示项，值从 0 开始
  next	Bool	Card控件显示切换	值为 true 则切换到后一项，false 则切换到前一项
  prev	Bool	Card控件显示切换	值为 false 则切换到后一项，true 则切换到前一项

• setData 设置更改属性示例

  示例代码	注解
  this.setData({card1 : 1})	将 id 为 card1 的 Card 控件的选中项置为 1，即第2项
  this.setData({card1 : {value : 1}})	将 id 为 card1 的 Card 控件的选中项置为 1，即第2项
  this.setData({card1 : {next : true}})	将 id 为 card1 的 Card 控件显示切换到下一项
  this.setData({card1 : {prev : true}})	将 id 为 card1 的 Card 控件显示切换到前一项