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 控件显示切换到前一项