Grid 宫格

引入

基本用法

通过属性设置格子内的图标，text属性设置文字内容

  1. <van-grid>
  2.   <van-grid-item icon="photo-o" text="文字" />
  3.   <van-grid-item icon="photo-o" text="文字" />
  4.   <van-grid-item icon="photo-o" text="文字" />
  5.   <van-grid-item icon="photo-o" text="文字" />
  6. </van-grid>

自定义列数

默认一行展示四个格子，可以通过column-num自定义列数

  1.   <van-grid-item>
  2.     <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
  3.   </van-grid-item>
  4.   <van-grid-item>
  6.   </van-grid-item>
  7.   <van-grid-item>
  8.     <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
  9.   </van-grid-item>
  10. </van-grid>

正方形格子

设置square属性后，格子的高度会和宽度保持一致

格子间距

通过gutter属性设置格子之间的距离

<van-grid :gutter="10">
  <van-grid-item
    v-for="value in 8"
    :key="value"
    icon="photo-o"
    text="文字"
  />
</van-grid>

页面导航

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标



API
Grid Props


GridItem Props


GridItem Events