# Grid 宫格

概述

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

# 支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

# 引入

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

第一种：在页面中引用、注册

import fuiGrid from "@/components/firstui/fui-grid/fui-grid.uvue"
import fuiGridItem from "@/components/firstui/fui-grid-item/fui-grid-item.uvue"
export default {
	components:{
		fuiGrid,
		fuiGridItem
	}
}

1
2
3
4
5
6
7
8

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

# 代码演示

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

基础使用

九宫格。

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

1
2
3
4
5
6
7
8
9

export default {
	data() {
		return {
			nums: ['Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid'] as string[]
		}
	},
	methods: {

	}
}

1
2
3
4
5
6
7
8
9
10

高度自适应

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

<fui-grid :square="false">
	<fui-grid-item v-for="(item,index) in nums" :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 class="fui-text">{{item}}</text>
		</view>
	</fui-grid-item>
</fui-grid>

1
2
3
4
5
6
7
8
9

export default {
	data() {
		return {
			nums: ['Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid'] as string[]
		}
	},
	methods: {

	}
}

1
2
3
4
5
6
7
8
9
10

修改列数

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

<fui-grid :columns="4">
	<fui-grid-item v-for="(item,index) in arrs" :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 class="fui-text">{{item}}</text>
		</view>
	</fui-grid-item>
</fui-grid>

1
2
3
4
5
6
7
8
9

 export default {
	data() {
		return {
			arrs: ['Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid', 'Grid'] as string[]
		}
	},
	methods: {

	}
}

1
2
3
4
5
6
7
8
9
10

# 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	-

温馨提示

边框颜色需通过scss变量来调整（注：如果不生效则需要全局设置）。

$fui-color-border: #EEEEEE !default;

# Events

# fui-grid 组件

事件名	类型	说明	回调参数
@onclick	(event: number) => void	点击item时触发	number：item索引

# fui-grid-item 组件

事件名	类型	说明	回调参数
@onclick	(event: number) => void	点击item时触发	number：item索引

温馨提示

点击事件返回的索引值需要通过 fui-grid-item 组件 index 属性传入。

示例预览

# 示例代码地址

Grid 宫格

← Layout 栅格布局 Panel 面板 →