266 lines
6.1 KiB
Markdown
266 lines
6.1 KiB
Markdown
# 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
|
|
**改进效果:** 底部导航栏更美观,交互更流畅
|