TuniaoUI

# Grid 宫格布局

宫格组件一般用于同时展示多个同类项目的场景，可以给宫格的项目设置徽标组件(badge)，或者图标等，也可以扩展为左右滑动的轮播形式。

# Grid 宫格布局

通过基础的12分栏，简单便捷的实现布局。

说明

宫格布局的外层盒子，结合组件tn-grid-item使用

注意

由于微信小程序的特殊性，在使用本组件的时候，需要设置tn-grid-item的style中的width属性

注意

如果你发现预览框是划不动的话，可以把你的鼠标放到 预览框 “对齐方式”这个标题上了再去滚动鼠标(手动狗头)

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ 兼容中 兼容中 兼容中 兼容中

# 基本使用

设置每行3列，居中显示的布局。

<template>
    <tn-grid align="center" :col="col">
      <block v-for="(item, index) in 14" :key="index">
        <!-- H5 -->
        <!-- #ifndef MP-WEIXIN -->
        <tn-grid-item>
          <view style="padding: 30rpx;">{{ item }}</view>
        </tn-grid-item>
        <!-- #endif-->
        
        <!-- 微信小程序 -->
        <!-- #ifdef MP-WEIXIN -->
        <tn-grid-item :style="{width: gridItemWidth}">
          <view style="padding: 30rpx;">{{ item }}</view>
        </tn-grid-item>
        <!-- #endif-->
      </block>
    </tn-grid>
</template>

<script>
	export default {
        data() {
          col: 3
        },
        computed: {
          // 兼容小程序
          gridItemWidth() {
            return 100 / this.col + '%'
          }
        }
    }
</script>

# API

# Grid Props

属性名 说明 类型 默认值 可选值
col 布局每一列放多少个元素 Number|String 3 -
align 对齐方式（兼容小程序，需要设置tn-grid-item的style中的width属性） String left center/right
hoverClass 点击时的效果的class String tn-hover -

# Grid Slots

名称 说明
default 用户存放tn-grid-item组件

# Grid Event

none

# Grid-item Props

属性名 说明 类型 默认值 可选值
index 当前组件序号 Number|String - -

# Grid-item Slots

名称 说明
default 用户自定义显示内容

# Grid-item Event

事件名称 说明 回调参数
click 按钮点击事件 index

← Skeleton 骨架屏 →