# Grid 宫格

概述

Grid 宫格，主要使用场景如：热门内容等。
Grid 提供了fui-grid 和 fui-grid-item 两个组件来进行布局。

# 引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "宫格",
  "usingComponents": {
    "fui-grid": "/components/firstui/fui-grid/fui-grid",
    "fui-grid-item": "/components/firstui/fui-grid-item/fui-grid-item"
  }
}

1
2
3
4
5
6
7

第二种：在根目录app.json文件中全局引入

"usingComponents": {
   "fui-grid": "components/firstui/fui-grid/fui-grid",
   "fui-grid-item": "components/firstui/fui-grid-item/fui-grid-item"
  }

1
2
3
4

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

九宫格。

<fui-grid>
  <fui-grid-item wx:for="{{nums}}" wx:key="index">
	<view class="fui-grid__cell">
	  <image src="/static/images/common/icon_tabbar_3x.png" class="fui-icon" mode="widthFix"></image>
	  <text>Grid</text>
	</view>
  </fui-grid-item>
</fui-grid>

1
2
3
4
5
6
7
8

Page({
  data: {
    nums: [0, 1, 2, 3, 4, 5, 6, 7, 8]
  }
})

1
2
3
4
5

高度自适应

通过 square 属性设置宫格item是否为正方形显示，设置为false则高度自适应。

 <fui-grid square="{{false}}">
  <fui-grid-item wx:for="{{nums}}" wx:key="index">
	<view class="fui-grid__cell fui-padding">
	  <image src="/static/images/common/icon_tabbar_2x.png" class="fui-icon__2x" mode="widthFix">
	  </image>
	  <text>Grid</text>
	</view>
  </fui-grid-item>
</fui-grid>

1
2
3
4
5
6
7
8
9

Page({
  data: {
    nums: [0, 1, 2, 3, 4, 5, 6, 7, 8]
  }
})

1
2
3
4
5

修改列数

通过 columns 属性设置宫格每行显示的item数。

<fui-grid columns="{{4}}">
  <fui-grid-item wx:for="{{arrs}}" wx:key="index">
	<view class="fui-grid__cell fui-padding">
	  <image src="/static/images/common/icon_tabbar_2x.png" class="fui-icon__2x" mode="widthFix">
	  </image>
	  <text>Grid</text>
	</view>
  </fui-grid-item>
</fui-grid>

1
2
3
4
5
6
7
8
9

Page({
  data: {
    arrs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
  }
})

1
2
3
4
5

# Slots

# fui-grid 组件

插槽名称	说明
default	标签显示内容，内部由一个或多个fui-grid-item组成

# fui-grid-item 组件

插槽名称	说明
default	标签内显示的自定义内容

# Props

# fui-grid 组件

属性名	类型	说明	默认值	其他说明
columns	Number	每行显示item数	3	-
showBorder	Boolean	是否显示边框	true	-
square	Boolean	item是否显示为正方形	true	-

# fui-grid-item 组件

属性名	类型	说明	默认值	其他说明
highlight	Boolean	是否有点击效果	true	-
backgroundColor	String	背景颜色	transparent	-
index	Number	item索引	0	-

温馨提示

组件边框颜色需通过 css 变量 --fui-color-border 修改。默认值：var(--fui-color-border, #EEEEEE)。

# Events

# fui-grid 组件

事件名	说明	回调参数
bind:click	点击item时触发	e.detail = { index:索引 }

# fui-grid-item 组件

事件名	说明	回调参数
bind:click V1.9.5+	点击item时触发	e.detail={ index:索引 }

示例预览

← Layout 栅格布局 Panel 面板 →