# TDesign TabBar 美化完成

## 📅 更新时间
2026-01-06

## 🎨 改进内容

### 从原生 TabBar 升级到 TDesign TabBar

**修改前:**
- 使用微信小程序原生 `tabBar` 配置
- 样式固定,无法自定义
- 图标需要准备 PNG 文件
- 仅支持文字标签

**修改后:**
- ✅ 使用 TDesign `<t-tab-bar>` 组件
- ✅ 支持 Icon 图标(使用 icon 属性)
- ✅ 更现代的设计风格
- ✅ 与页面内容完美集成
- ✅ 支持更多自定义选项

## 📦 修改文件

### 1. [app.json](app.json)

**移除原生 TabBar 配置:**
```json
// 删除了以下配置
"tabBar": {
  "color": "#666666",
  "selectedColor": "#0052D9",
  "backgroundColor": "#ffffff",
  "borderStyle": "black",
  "list": [...]
}
```

**添加 TDesign 组件:**
```json
"usingComponents": {
  "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
  "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"
}
```

### 2. [pages/index/index.wxml](pages/index/index.wxml:210-214)

**添加 TDesign TabBar:**
```xml
<t-tab-bar value="0" theme="normal" bindchange="onTabChange">
  <t-tab-bar-item value="0" icon="search" label="价格查询" />
  <t-tab-bar-item value="1" icon="chart-line" label="价格趋势" />
</t-tab-bar>
```

**关键属性:**
- `value="0"` - 当前激活的 tab 索引(0 = 价格查询页)
- `theme="normal"` - 主题样式
- `bindchange="onTabChange"` - 切换事件
- `icon="search"` - 使用 TDesign 内置图标
- `icon="chart-line"` - 图表图标

### 3. [pages/index/index.js](pages/index/index.js:391-407)

**添加切换逻辑:**
```javascript
onTabChange(e) {
  const value = e.detail.value

  if (value === '0') {
    // 当前页,不做处理
    return
  } else if (value === '1') {
    // 跳转到价格趋势页
    wx.switchTab({
      url: '/pages/trend/trend'
    })
  }
}
```

### 4. [pages/trend/trend.wxml](pages/trend/trend.wxml:122-126)

**添加 TDesign TabBar:**
```xml
<t-tab-bar value="1" theme="normal" bindchange="onTabChange">
  <t-tab-bar-item value="0" icon="search" label="价格查询" />
  <t-tab-bar-item value="1" icon="chart-line" label="价格趋势" />
</t-tab-bar>
```

**关键属性:**
- `value="1"` - 当前激活的 tab 索引(1 = 价格趋势页)

### 5. [pages/trend/trend.js](pages/trend/trend.js:248-264)

**添加切换逻辑:**
```javascript
onTabChange(e) {
  const value = e.detail.value

  if (value === '1') {
    // 当前页,不做处理
    return
  } else if (value === '0') {
    // 跳转到价格查询页
    wx.switchTab({
      url: '/pages/index/index'
    })
  }
}
```

### 6. 样式调整

**[pages/index/index.wxss](pages/index/index.wxss:14):**
```css
.container {
  padding-bottom: 120rpx; /* 留出 TabBar 空间 */
}
```

**[pages/trend/trend.wxss](pages/trend/trend.wxss:12):**
```css
.container {
  padding-bottom: 120rpx; /* 留出 TabBar 空间 */
}
```

## 🎯 TDesign TabBar 特性

### 1. 内置图标

无需准备图片文件,直接使用 TDesign 内置图标:

| 图标名称 | 用途 | Tab项 |
|---------|------|-------|
| `search` | 搜索/查询 | 价格查询 |
| `chart-line` | 折线图/趋势 | 价格趋势 |
| `home` | 首页 | - |
| `user` | 用户中心 | - |
| `settings` | 设置 | - |
| `cart` | 购物车 | - |

更多图标: [TDesign Icons](https://tdesign.tencent.com/miniprogram/components/icon)

### 2. 主题样式

**`theme` 属性可选值:**
- `normal` - 默认主题(推荐)
- `tag` - 标签样式

### 3. 自定义选项

**TabBar 属性:**
- `value` (String/Number) - 当前激活的 tab
- `theme` (String) - 主题样式
- `split` (Boolean) - 是否显示分割线
- `bindchange` - 切换事件

**TabBar Item 属性:**
- `value` - tab 的唯一标识
- `icon` - 图标名称
- `label` - 文本标签
- `badgeProps` - 徽标属性

## 📊 TabBar 对比

| 特性 | 原生 TabBar | TDesign TabBar |
|------|-------------|----------------|
| 图标支持 | 需要 PNG 文件 | 内置 icon 名称 |
| 自定义样式 | 有限 | 完全可定制 |
| 位置固定 | 底部固定 | 可任意放置 |
| 集成方式 | app.json 配置 | 页面组件 |
| 动画效果 | 系统默认 | TDesign 动画 |
| 徽标支持 | ❌ | ✅ |
| 分割线 | ❌ | ✅ |

## 🔧 工作原理

### 页面切换流程

```
用户点击 TabBar
    ↓
触发 bindchange 事件
    ↓
获取 e.detail.value (0 或 1)
    ↓
判断是否为当前页
    ↓
否 → 使用 wx.switchTab() 跳转
是 → 不做处理
```

### 状态管理

**价格查询页 (index):**
- TabBar `value="0"` (激活状态)
- 点击"价格趋势"(value=1) → 跳转到 trend 页

**价格趋势页 (trend):**
- TabBar `value="1"` (激活状态)
- 点击"价格查询"(value=0) → 跳转到 index 页

### 为什么使用 wx.switchTab()?

因为使用了 TabBar(虽然是组件形式),所以页面关系类似于 TabBar 页面,需要使用 `wx.switchTab()` 而非 `wx.navigateTo()` 或 `wx.redirectTo()`。

## ✅ 完成效果

### 视觉效果
- ✅ 底部固定显示 TabBar
- ✅ 当前页图标高亮显示
- ✅ 点击切换有平滑动画
- ✅ TDesign 蓝色主题(#0052D9)
- ✅ 图标 + 文字标签布局

### 交互体验
- ✅ 点击即时响应
- ✅ 页面切换流畅
- ✅ 内容不被 TabBar 遮挡(padding-bottom: 120rpx)
- ✅ 返回键正常工作

### 设计统一
- ✅ 与 TDesign 其他组件风格一致
- ✅ 图标与功能语义匹配
- ✅ 符合微信小程序设计规范

## 📝 注意事项

1. **图标大小**
   - TDesign TabBar 图标大小固定,无法调整
   - 如需自定义大小,使用图片而非 icon 属性

2. **页面切换**
   - 必须使用 `wx.switchTab()`
   - 不能使用 `wx.navigateTo()` 或 `wx.redirectTo()`

3. **底部留白**
   - 必须设置 `padding-bottom: 120rpx`
   - 避免内容被 TabBar 遮挡

4. **value 类型**
   - 可以是数字 `0`、`1`
   - 也可以是字符串 `'index'`、`'trend'`
   - 两个页面要对应一致

## 🎉 总结

成功将原生 TabBar 升级为 TDesign TabBar,实现:

- ✅ 更现代的设计风格
- ✅ 无需准备图标图片
- ✅ 更灵活的自定义选项
- ✅ 完美的组件集成
- ✅ 流畅的用户体验

**状态:** ✅ 已完成,可以正常使用

---

**完成时间:** 2026-01-06
**改进效果:** 底部导航栏更美观,交互更流畅