# grid-builder

> 基础库 3.4.0 开始支持，低版本需做[兼容处理](1003706)。

> 相关文档: [Skyline 渲染引擎](/miniprogram/dev/framework/runtime/skyline/introduction.md)、[Skyline 迁移起步](/miniprogram/dev/framework/custom-component/glass-easel/migration.md)

渲染框架支持情况：Skyline （使用最新 [Nightly](/miniprogram/dev/devtools/nightly.html) 工具调试）

## 功能描述

网格构造器，仅支持作为 `<scroll-view type="custom">` 模式的直接子节点。具体用法可参考 [scroll-view](./scroll-view#列表构造器使用方法)

## 通用属性


```json
[
  {
    "属性": "padding",
    "类型": "Array",
    "默认值": "[0, 0, 0, 0]",
    "必填": "否",
    "说明": "长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距"
  },
  {
    "属性": "list",
    "类型": "Array",
    "默认值": "",
    "必填": "是",
    "说明": "需要用于渲染的列表"
  },
  {
    "属性": "child-count",
    "类型": "Array",
    "默认值": "",
    "必填": "否",
    "说明": "完整列表的长度，如果不传则取 list 的长度作为其值"
  },
  {
    "属性": "type",
    "类型": "string",
    "默认值": "aligned",
    "必填": "是",
    "说明": "布局方式",
    "子项": [
      {
        "合法值": "aligned",
        "说明": "每行高度由同一行中最大高度子节点决定"
      },
      {
        "合法值": "masonry",
        "说明": "瀑布流，根据子元素高度自动布局"
      }
    ]
  },
  {
    "属性": "cross-axis-count",
    "类型": "number",
    "默认值": "2",
    "必填": "否",
    "说明": "交叉轴元素数量"
  },
  {
    "属性": "max-cross-axis-extent",
    "类型": "number",
    "默认值": "0",
    "必填": "否",
    "说明": "交叉轴元素最大范围"
  },
  {
    "属性": "main-axis-gap",
    "类型": "number",
    "默认值": "0",
    "必填": "否",
    "说明": "主轴方向间隔"
  },
  {
    "属性": "cross-axis-gap",
    "类型": "number",
    "默认值": "0",
    "必填": "否",
    "说明": "交叉轴方向间隔"
  },
  {
    "属性": "bind:itembuild",
    "类型": "eventhandle",
    "默认值": "",
    "必填": "否",
    "说明": "列表项创建时触发，event.detail = {index}，index 即被创建的列表项序号"
  },
  {
    "属性": "bind:itemdispose",
    "类型": "eventhandle",
    "默认值": "",
    "必填": "否",
    "说明": "列表项回收时触发，event.detail = {index}，index 即被回收的列表项序号"
  }
]
```

## Bug & Tip

1. `tip`: 目前只支持纵向滚动列表
2. `bug`: 目前 `grid-builder` 在进入屏幕后不允许再被滚动出屏幕，否则会被判定成列表需要重新布局进而自动滚动到 `grid-builder` 的顶端

## 使用方法

```html
<scroll-view 
  type="custom" 
  scroll-y
>
   <grid-builder
    list="{{list}}"
    child-count="{{list.length}}"
    cross-axis-count="4"
    cross-axis-gap="8"
    main-axis-gap="8"
  >
    <view slot:item slot:index style="height: 200px;">
      <view>{{item.id}}-{{index}}</view>
    </view>
  </grid-builder>
</scroll-view>
```