mms-grid 宫格

简述

九宫格布局，常用于首页金刚区导航。

注意

注意： 请以 uni_modules/mms-unix 与本文为准；各端差异以 uni-app 与各平台官方文档为准。涉及隐私能力（相册、定位、剪贴板、手机号等）需在 manifest 与后台完成配置。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基本使用

<template>
	<mms-grid
		:col="4"
		:list="gridList"
		@click="handleClick"
	/>
</template>

<script setup lang="uts">
	const gridList = [
		{ icon: 'xxx', text: '导航一' },
		{ icon: 'xxx', text: '导航二' },
		{ icon: 'xxx', text: '导航三' },
		{ icon: 'xxx', text: '导航四' },
	]
</script>

Props

参数	说明	类型	默认值
col / column	宫格列数	number	4
list	宫格数据	array	[]
square	是否固定正方形	boolean	false
border	是否显示单元格边框；使用默认 list 渲染时作用于内部项；使用 mms-grid-item 插槽时也会通过 provide 统一下发，子项无需逐个设 :border="false"	boolean	true

Events

事件名	说明	回调参数
click	点击宫格项触发	{ item, index }

插槽

名称	说明
item	自定义宫格项内容

示例

四列宫格

<mms-grid :col="4" :list="list" @click="handleClick"></mms-grid>

五列宫格 正方形

<mms-grid :col="5" :square="true" :list="list" @click="handleClick"></mms-grid>

自定义宫格项

<mms-grid :col="4" :list="list">
	<template #item="{item}">
		<view>
			<image :src="item.icon"></image>
			<text>{{item.text}}</text>
		</view>
	</template>
</mms-grid>