59 lines
1.4 KiB
Markdown
59 lines
1.4 KiB
Markdown
|
# TileGrid 组件
|
|||
|
|
|
|||
|
|
## 简介
|
|||
|
|
TileGrid 是一个通用的瓦片网格组件，用于显示一排均匀分布的瓦片图片。
|
|||
|
|
|
|||
|
|
## 功能
|
|||
|
|
- 支持自定义瓦片数量
|
|||
|
|
- 支持自定义瓦片图片
|
|||
|
|
- 自动均匀分布瓦片
|
|||
|
|
- 响应式布局
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
### 1. 导入组件
|
|||
|
|
```javascript
|
|||
|
|
import TileGrid from "../../components/tile-grid/tile-grid.vue";
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 注册组件
|
|||
|
|
```javascript
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
TileGrid
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 在模板中使用
|
|||
|
|
```vue
|
|||
|
|
<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 之间，避免过多影响性能
|
|||
|
|
- 组件会自动适应容器宽度
|