112 lines
2.7 KiB
Markdown
112 lines
2.7 KiB
Markdown
# TabBar 图标文件说明
|
||
|
||
## 需要的图标文件
|
||
|
||
本项目需要以下 6 个图标文件用于底部导航栏（TabBar）：
|
||
|
||
### 1. 首页图标
|
||
- `home.png` - 未选中状态的首页图标
|
||
- `home-active.png` - 选中状态的首页图标
|
||
|
||
### 2. 记账图标
|
||
- `add.png` - 未选中状态的记账图标
|
||
- `add-active.png` - 选中状态的记账图标
|
||
|
||
### 3. 统计图标
|
||
- `statistics.png` - 未选中状态的统计图标
|
||
- `statistics-active.png` - 选中状态的统计图标
|
||
|
||
## 图标规格要求
|
||
|
||
- **尺寸**: 建议 81px × 81px（@2x）或 40px × 40px（@1x）
|
||
- **格式**: PNG（支持透明背景）
|
||
- **颜色**:
|
||
- 未选中状态：灰色（#7A7E83）
|
||
- 选中状态：紫色（#667eea）
|
||
|
||
## 如何获取图标
|
||
|
||
### 方法1：使用图标库（推荐）
|
||
|
||
1. **IconFont（阿里巴巴图标库）**
|
||
- 访问：https://www.iconfont.cn/
|
||
- 搜索关键词：首页、home、记账、add、统计、statistics
|
||
- 下载 PNG 格式，选择合适尺寸
|
||
|
||
2. **Flaticon**
|
||
- 访问：https://www.flaticon.com/
|
||
- 搜索并下载免费图标
|
||
|
||
3. **Icons8**
|
||
- 访问：https://icons8.com/
|
||
- 搜索并下载图标
|
||
|
||
### 方法2：使用在线图标生成器
|
||
|
||
1. **Canva**
|
||
- 访问：https://www.canva.com/
|
||
- 创建 81×81px 的画布
|
||
- 设计图标并导出为 PNG
|
||
|
||
2. **Figma**
|
||
- 使用 Figma 设计图标
|
||
- 导出为 PNG 格式
|
||
|
||
### 方法3：使用 AI 生成
|
||
|
||
使用 AI 工具（如 Midjourney、DALL-E）生成图标：
|
||
- 提示词示例："simple icon home house, minimal style, purple color, transparent background, 81x81px"
|
||
|
||
### 方法4：使用 Emoji（临时方案）
|
||
|
||
如果暂时没有图标文件，可以：
|
||
1. 使用系统字体图标
|
||
2. 或者暂时移除 tabBar 配置，使用其他导航方式
|
||
|
||
## 快速获取方案
|
||
|
||
### 使用 uni-app 官方图标
|
||
|
||
uni-app 提供了内置图标，可以修改 `pages.json` 使用文字图标：
|
||
|
||
```json
|
||
{
|
||
"tabBar": {
|
||
"list": [
|
||
{
|
||
"pagePath": "pages/index/index",
|
||
"text": "首页",
|
||
"iconPath": "",
|
||
"selectedIconPath": ""
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
### 使用字体图标
|
||
|
||
可以使用 iconfont 字体图标库，将图标转换为字体文件使用。
|
||
|
||
## 图标命名规范
|
||
|
||
请确保图标文件命名与 `pages.json` 中的配置一致：
|
||
|
||
```
|
||
static/tabbar/
|
||
├── home.png
|
||
├── home-active.png
|
||
├── add.png
|
||
├── add-active.png
|
||
├── statistics.png
|
||
└── statistics-active.png
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. 图标文件必须放在 `static/tabbar/` 目录下
|
||
2. 文件名必须与 `pages.json` 中的配置完全一致
|
||
3. 建议使用 @2x 尺寸（81px）以获得更好的显示效果
|
||
4. 如果图标文件不存在，tabBar 可能无法正常显示
|
||
|