跳到主要内容

网格

网格按固定行列排列子组件。适合做图标入口、指标卡片、小型宫格。

用法​

在编辑器底部点加号,添加 网格,通常再放入一个纵列作为每个格子的模板。设置「数据源（循环）」后,模板会按数组重复显示。

属性​

字段可填写说明
方向horizontal / verticalhorizontal 先从左到右,再换行;vertical 先从上到下,再换列
列数 / 行数3 / ${count}横向时表示列数;纵向时表示每列条目数
间距0 / 8行列之间的间距
数据源（循环）{items[item]}按数组重复渲染格子模板
宽 / 高auto / 100 / 100% / ${w}网格尺寸
水平偏移 / 垂直偏移 / Z 轴偏移0 / 8 / ${x}只移动显示位置,不改变原本占位
内边距 / 外边距8 / 8,8,8,8四周留白
显示true / false / ${show}控制是否显示
背景色#FFFFFF / ${color}网格背景
圆角0 / 8 / 50%背景圆角
旋转角度0 / 15 / ${angle}顺时针旋转角度
不透明度0 到 11 为完全不透明

例:横向 3 列网格​

JS:

let items = [
  { name: "音乐", icon: "music" },
  { name: "相机", icon: "camera" },
  { name: "记事", icon: "note" },
  { name: "天气", icon: "cloud" },
  { name: "时钟", icon: "clock" },
  { name: "设置", icon: "gear" },
]

网格配置:

字段填写
方向horizontal
列数 / 行数3
间距8
数据源（循环）{items[item]}

格子模板:

纵列
 ├─ 图标,「图标」填 ${item.icon},「字号」填 24
 └─ 文本,「内容」填 ${item.name},「字号」填 12

例:垂直方向​

「方向」填 vertical,「列数 / 行数」填 4:数据会先填满第一列 4 个,再填第二列 4 个。

注意事项​

别把长列表做成网格

长列表超过 50 条时,建议用纵列加「数据源（循环）」控制数量。网格适合固定行列的小规模展示。

数据源和子组件的关系

网格的子组件就是“每个格子的模板”。通常只放一个根子组件,例如一个纵列,里面再放图标和文本。