Grid 宫格

fui-grid 提供行列布局，fui-grid-item 用于承载每个宫格的内容。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

vue

<!-- 三列宫格 -->
<fui-grid :columns="3" @click="handleGridClick">
  <!-- 第一个宫格 -->
  <fui-grid-item :index="0"><text>首页</text></fui-grid-item>
  <!-- 第二个宫格 -->
  <fui-grid-item :index="1"><text>消息</text></fui-grid-item>
  <!-- 第三个宫格 -->
  <fui-grid-item :index="2"><text>我的</text></fui-grid-item>
</fui-grid>

handleGridClick 接收 { detail: { index } }，应在页面的 methods 中自行实现。

容器属性

属性	类型	说明	官网默认值
columns	Number	每行宫格数量	3
showBorder	Boolean	是否显示边框	true
borderColor	String	边框颜色，仅 nvue 通过该属性控制	#EEEEEE
square	Boolean	宫格是否为正方形	true
between	Boolean	宫格是否两端对齐；仅在需要处理宽度误差时使用	false
emptyElements	Number、String	两端对齐时用于补齐末行的占位项数量	false
precise	Boolean	控制宫格宽度计算精度，V2.5.0 起支持	true

宫格项属性

属性	类型	说明	默认值
highlight	Boolean	是否显示点击态	true
backgroundColor	String	宫格项背景色	transparent
index	Number	点击事件返回的索引	0

事件

事件	说明	回调参数
click	点击宫格项，容器与宫格项均提供	`{ detail: { index } }`

平台及版本说明

between 和末行占位逻辑受平台条件编译限制；使用时请以目标平台测试为准。官网列出的 precise 为 V2.5.0 起的属性，当前本地源码未声明。emptyElements 主表列出官网默认值 false，本地源码默认值为 0。

插槽

插槽	说明
default	放置多个宫格项

Grid 宫格 ​

支持平台 ​

基础用法 ​

容器属性 ​

宫格项属性 ​

事件 ​

平台及版本说明 ​

插槽 ​