# Grid 宫格

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

提示

  1. 如果区块的数目多于设定的列数col,则换行显示
  2. 该组件只提供布局容器,内容自行通过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 - -
Last updated: 2021/9/8 下午4:14:10
10:44