Card

简介

Card 控件,它是一种容器控件,能够添加多个子控件,每个控件是独立显示的,可以通过左右或上下翻动 Card 控件显示 Card 中不同的页面即子控件,也可选择是否循环。

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

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

  • font:字体属性
  • textAlign:文本对齐方式

控件属性:包含基础控件所有属性。

属性名 类型 描述
card Object 包含往 card 中添加自定义面板所需要的信息
remove String 要从 card 中移除的控件 id
empty Bool true 有效, false 无效
value Number 有效值为 0 - card 中卡片个数减一
next Bool true 切换到下一页, false 前一页
prve Bool true 切换到前一页, false 下一页
duration Number 主要用于相邻页面动画过渡切换

setData 功能

card 属性功能

主要用于往 Card 中添加自定义面板。

card 属性说明:

属性 类型 说明
page Object card 所在 page 对象
items Array 数组,多组自定义面板描述

card 属性中 items 属性说明:

属性 类型 说明
xml String 自定义面板相对路径名
items Array 数组,重复加载自定义面板并配置面板或子控件相关属性
this.setData({
    card1: {                /* card 控件 id */
        card: {             /* 添加卡片功能属性名 */
            page: this,     /* page 属性,值为 card 所在 page 对象 */
            items: [        /* items 属性,数组 */
                {
                    xml: 'Panels/panel1',       /* xml 属性,自定义面板 URL */
                    items: [                    /* items 属性,数组 */
                        /* 添加自定义面板 panel1 到 card 中,并修改 id 为 card01 */
                        { panel1: { id: "card01", background: 0xFFFF0000 }, label1: "panel1 01" },
                        /* 添加自定义面板 panel1 到 card 中,并修改 id 为 card02 */
                        { panel1: { id: "card02", background: 0xFF00FF00 }, label1: "panel1 02" }
                    ]
                },
                {
                    xml: 'Panels/panel2',
                    items: [
                        /* 添加自定义面板 panel2 到 card 中,并修改 id 为 card03 */
                        { panel2: { id: "card03", background: 0xFFFF0000 }, label1: "panel2 01" },
                        /* 添加自定义面板 panel2 到 card 中,并修改 id 为 card04 */
                        { panel2: { id: "card04", background: 0xFF00FF00 }, label1: "panel2 02" }
                    ]
                }
            ]
        }
    }
})

remove 属性功能

主要用于从 Card 中移除卡片,即子控件。

属性 类型 说明
remove String 要从 card 中移除的控件 id
this.setData({ card1: { remove: "card01" } });  /* 从 card1 中移除 id 为 card01 的卡片(子控件) */

empty 属性功能

主要用于从 Card 中清除所有卡片,即子控件。

属性 类型 说明
empty Bool true 有效, false 无效
this.setData({ card1: { empty: true } });  /* 清空 card1 中的卡片(子控件) */

value 属性功能

主要用于切换显示页面,即子控件。

属性 类型 说明
value Number 有效值为 0 - card 中卡片个数减一
this.setData({ card1: { value: 0 } });  /* 切换到第一个页面(子控件) */
//this.setData({ card1: 0 });

next 属性功能

主要用于相邻页面动画过渡切换。

属性 类型 说明
next Bool true 切换到下一页, false 前一页
this.setData({ card1: { next: true } });    /* card1 切换到下一个页面(子控件) */
//this.setData({ card1: { next: false } }); /* card1 切换到前一个页面(子控件) */

prve 属性功能

主要用于相邻页面动画过渡切换。

属性 类型 说明
prve Bool true 切换到前一页, false 下一页
this.setData({ card1: { prve: true } });    /* card1 切换到前一个页面(子控件) */
//this.setData({ card1: { prve: false } }); /* card1 切换到下一个页面(子控件) */

duration 属性功能

主要用于相邻页面动画过渡切换。

属性 类型 说明
duration Number card 内页面的切换时间
this.setData({ card1: { duration: 200 } });    /* card1 切换页面(子控件)的时间 */