buddhism/components/tile-grid

TileGrid 组件

简介

TileGrid 是一个通用的瓦片网格组件，用于显示一排均匀分布的瓦片图片。

功能

• 支持自定义瓦片数量
• 支持自定义瓦片图片
• 自动均匀分布瓦片
• 响应式布局

使用方法

1. 导入组件

import TileGrid from "../../components/tile-grid/tile-grid.vue";

2. 注册组件

export default {
  components: {
    TileGrid
  }
}

3. 在模板中使用

<template>
  <view class="page">
    <!-- 使用默认10个瓦片 -->
    <tile-grid :tile-image="tilesImageEnum.TILE" />
    
    <!-- 自定义瓦片数量 -->
    <tile-grid :tile-count="5" :tile-image="tilesImageEnum.TILE" />
    
    <!-- 使用自定义图片 -->
    <tile-grid :tile-count="8" :tile-image="customTileImage" />
  </view>
</template>

Props 参数

参数	类型	默认值	必填	说明
tileCount	Number	10	否	瓦片数量
tileImage	String	-	是	瓦片图片URL

样式说明

• 瓦片网格使用 flex 布局，自动均匀分布
• 每个瓦片图片尺寸为 75rpx × 48rpx
• 瓦片间距通过 justify-content: space-between 自动计算

注意事项

• 确保传入的图片URL有效
• 瓦片数量建议在 1-20 之间，避免过多影响性能
• 组件会自动适应容器宽度