先看 通用。同类：基础 · 表单 · 导航 · 展示 · 反馈 · 布局

布局

行列、卡片、间距、列表、宫格。把一组组件打包复用见 组件结构。

Divider 分割线

横向细线，用来隔开两段内容。

{ "type": "divider" }

Space 间距

空白占位，用 height 控制高度（dp）。

参数名	类型	说明
height	Number	高度 dp，默认约 8

{ "type": "space", "height": 12 }

Row 横向

横向排列子项。weight 撑开子项。valign：top / center / bottom，默认垂直居中。

参数名	类型	说明
children	Array	子组件
style.gap	Number	子项间距 dp
style.valign	String	top / center / bottom
style.weight	Number	子项在 row 里的权重，写在子项 style 上

页面第一层可吸顶 / 吸底（style.sticky）：

Column 纵向

纵向排列子项。在一屏内居中时设 height: "100%"，再写 align / valign。

参数名	类型	说明
children	Array	子组件
style.gap	Number	子项间距 dp
style.align	String	子项水平位置：left / center / right
style.valign	String	子项垂直位置：top / center / bottom
style.height	Number / String	"100%" 占满可见区域，配合 valign 居中

页面 title 为对象，可改文案、背景，或 hidden 隐藏。字段见 页面结构。

Card 卡片

白底圆角容器，可整体绑定 action。

写上 name 和 value 后变成可选中卡片：同一 name 对应 data 里的字段，选中后底色变成浅绿并带边框。卡片本身不改选中态，要点了之后在 page.js 里 setData，其它卡片才会跟着变。multiple: true 时值为数组，可多选。

参数名	类型	说明
name	String	对应 data 中的键，用来判断哪张卡是选中态
value	String	该卡片代表的选项值
multiple	Boolean	true 为多选，值为数组；默认多选一
selectedBackground	String	选中底色，默认 #E6F2F0
onTap	String	轻触时调用的 Page 方法，e.value 是该卡片的 value

{
  "type": "card",
  "name": "plan",
  "value": "month",
  "onTap": "onSelectPlan",
  "style": { "weight": 1 },
  "children": [{ "type": "text", "text": "月卡" }]
}

Page({
  data: {
    plan: 'year',
    apps: ['xhs']
  },
  onSelectPlan(e) {
    this.setData({ plan: e.value });
  },
  onToggleApp(e) {
    var apps = this.data.apps ? this.data.apps.slice() : [];
    var i = apps.indexOf(e.value);
    if (i >= 0) {
      apps.splice(i, 1);
    } else {
      apps.push(e.value);
    }
    this.setData({ apps: apps });
  }
});

List 列表

按 bind 指向的数组逐条渲染。item 为模板。循环内使用 {{item.xxx}}、{{index}}。"direction": "row" 横排。

数组为空时不渲染行。空提示请用 Empty 自己摆。

整页滚到底调用 Page.onReachBottom。触底后由 JS 打开 loading；没有更多数据时关掉转圈，并用 setData 写下底线文案。

参数名	类型	说明
bind	String	数据路径，对应 data 中的数组，如 "tasks" 或 "item.tags"
id	String	未写 bind 时当作 bind
item	Object / Array	每一项的组件模板。数组则包一层 column
onScroll / onReachBottom / onReachTop	String	该列表的滚动事件。整页到底用 Page.onReachBottom
children	Array	未写 item 时作为模板
direction	String	column（默认）或 row
style.gap	Number	行间距 dp，默认 8

模板	含义
{{item.title}}	当前项字段
{{item.id}}	当前项 id
{{index}}	下标，从 0 开始

任务列表

item 内可嵌套 row / button / switch / showIf。行上和行内控件的 onTap / onChange，e 都含 item、index。运行任务用 Engines.executeScript，见 执行脚本。列表开关见 Switch。

嵌套

{{item.user.name}} 取内层字段。内层 list 的 bind 可写 item.tags；内层循环中 {{item}} 为当前内层项。

Grid + List

同一页多个 bind 互不影响。

Grid 宫格

columns 为一行列数。入口卡片图片 "width": "50%"，按正方形等比缩放。只写宽或只写高均保持正方形。

参数名	类型	说明
bind	String	数据路径，对应 data 中的数组
id	String	未写 bind 时当作 bind
columns	Number	列数
item	Object	格子模板
empty	String	数组为空时的提示
style.gap	Number	格子间距 dp，默认 8。图文间距用 item 卡片的 style.gap，默认 12