miniprogram-design

Appearance

Container ​

编辑器预设的基本容器组件

WARNING

栅格布局并不是真正意义的上栅格，而是依赖flex和动态计算列宽模拟出来的效果，因此实际使用中不可避免的会出现自动挤占空白格的情况，这个是不可避免的。

使用 ​

json
{
  "name": "容器",
  "_view": "container",
  "_schema": "container"
}
{
  "name": "容器",
  "_view": "container",
  "_schema": "container"
}

配置项 ​

名称类型默认值可选值说明
gridnumber2-栅格布局的列数

INFO

其它诸如列间隔，行间隔等依赖css样式实现的功能可以直接将对应样式作为key配置在schema中

json
[
  {
    "type": "number",
    "label": "列",
    "key": "grid"
  },
  {
    "type": "number",
    "label": "列间隙",
    "key": "style.columnGap"
  },
  {
    "type": "number",
    "label": "行间隙",
    "key": "style.rowGap"
  }
]
[
  {
    "type": "number",
    "label": "列",
    "key": "grid"
  },
  {
    "type": "number",
    "label": "列间隙",
    "key": "style.columnGap"
  },
  {
    "type": "number",
    "label": "行间隙",
    "key": "style.rowGap"
  }
]