# Grid 宫格

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

提示

如果区块的数目多于设定的列数col，则换行显示
该组件只提供布局容器，内容自行通过slot设置

警告

index 必传，否则会出现列数计算出错和边框设置失效的问题

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

# 示例

# 基础用法

可通过 col 属性设置每行几列元素。

<pi-grid square col="4" :gap="13">
  <pi-grid-item v-for="index in 12" :key="index" :index="index - 1">
    <view class="pi-h-100P pi-flex-column-center">{{ index }}</view>
  </pi-grid-item>
</pi-grid>

1
2
3
4
5

# 九宫格

<pi-grid square col="3">
  <pi-grid-item v-for="index in 9" :key="index" :index="index - 1">
    <view class="pi-h-100P pi-flex-column-center">{{ index }}</view>
  </pi-grid-item>
</pi-grid>

1
2
3
4
5

# 每列间隔

可通过 gap 属性设置每列的间隔。

<pi-grid square col="6" :gap="20">
  <pi-grid-item v-for="index in 18" :key="index" :index="index - 1">
    <view class="pi-h-100P pi-flex-column-center">{{ index }}</view>
  </pi-grid-item>
</pi-grid>

1
2
3
4
5

# 隐藏边框

可通过 border 属性设置是否显示宫格的边框。

<pi-grid :border="false" square col="5">
  <pi-grid-item v-for="index in 15" :key="index" :index="index - 1">
    <view class="pi-h-100P pi-flex-column-center">{{ index }}</view>
  </pi-grid-item>
</pi-grid>

1
2
3
4
5

# 菜单图标

<pi-grid square col="4" :gap="13">
  <pi-grid-item v-for="(icon, index) in icons" :key="icon.id" :index="index">
    <view class="pi-h-100P pi-flex-column-center">
      <pi-icon :name="icon.font_class" custom-class="pi-primary pi-fz-48" dot />
      <view class="pi-fz-24 pi-mg-top-8 pi-light-gray pi-text-nowrap">
        {{ icon.name }}
      </view>
    </view>
  </pi-grid-item>
</pi-grid>

1
2
3
4
5
6
7
8
9
10

# Grid Props

名称	描述	类型	必选	默认值
customStyle	自定义样式	`Object`	`false`	-
customClass	自定义样式类	`String`	`false`	-
col	分成几列	`Number \| String`	`false`	5
square	宫格是否以正方形撑开	`Boolean`	`false`	false
border	是否显示边框	`Boolean`	`false`	true
gap	宫格之间间隔	`String \| Number`	`false`	0
hoverClass	宫格按压时的样式类，"none"为无效果	`String`	`false`	null

# GridItem Props

名称	描述	类型	必选	默认值
index	当前宫格索引，必传，否则会出现列数计算出错和边框设置失效的问题	`Number \| String`	`true`	-
customStyle	自定义样式	`Object`	`false`	-
customClass	自定义样式类	`String`	`false`	-
col	分成几列	`Number \| String`	`false`	5
square	宫格是否以正方形撑开	`Boolean`	`false`	false
border	是否显示边框	`Boolean`	`false`	true
gap	宫格之间间隔	`String \| Number`	`false`	0
bgColor	自定义背景色按钮	`String`	`false`	''
hoverClass	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果	`String`	`false`	-
hoverStartTime	按住后多久出现点击态，单位毫秒	`String \| Number`	`false`	-
hoverStayTime	手指松开后点击态保留时间，单位毫秒	`String \| Number`	`false`	-

# GridItem Events

事件名	描述	参数
click	-	-
tap	-	-

← Section 区块 List 列表 →