Skip to main content
Version: 3.x

GridBuilder

网格构造器,仅支持作为 <scroll-view type="custom"> 模式的直接子节点,仅 Skyline 支持。

支持情况:

参考文档

类型

ComponentType<GridBuilderProps>

GridBuilderProps

参数类型默认值必填说明
type"aligned" or "masonry""aligned"<br /><br />可选值:<br />- aligned: 每行高度由同一行中最大高度子节点决定<br />- masonry: 瀑布流,根据子元素高度自动布局布局方式
listany[][]需要用于渲染的列表
childCountnumber完整列表的长度,如果不传则取 list 的长度作为其值
crossAxisCountnumber2交叉轴元素数量
maxCrossAxisExtentnumber0交叉轴元素最大范围
mainAxisGapnumber0主轴方向间隔
crossAxisGapnumber0交叉轴方向间隔
padding[number, number, number, number][0, 0, 0, 0]长度为 4 的数组,按 top、right、bottom、left 顺序指定内边距
onItemBuildCommonEventFunction列表项创建时触发,event.detail = {index},index 即被创建的列表项序号
onItemDisposeCommonEventFunction列表项回收时触发,event.detail = {index},index 即被回收的列表项序号

API 支持度

API微信小程序H5React NativeHarmony
GridBuilderProps.type✔️
GridBuilderProps.list✔️
GridBuilderProps.childCount✔️
GridBuilderProps.crossAxisCount✔️
GridBuilderProps.maxCrossAxisExtent✔️
GridBuilderProps.mainAxisGap✔️
GridBuilderProps.crossAxisGap✔️
GridBuilderProps.padding✔️
GridBuilderProps.onItemBuild✔️
GridBuilderProps.onItemDispose✔️