130 lines
3.6 KiB
Markdown
130 lines
3.6 KiB
Markdown
# 自定义TabBar使用说明
|
||
|
||
## 功能概述
|
||
|
||
本项目实现了基于用户类型的动态自定义TabBar，支持根据用户登录状态和类型显示不同的导航项：
|
||
|
||
- **未登录状态**：默认显示求职者tabbar（职位 + 招聘会 + AI+ + 消息 + 我的）
|
||
- **企业用户（userType=0）**：显示"发布岗位"导航
|
||
- **求职者用户（userType=1,2,3）**：显示"招聘会"导航
|
||
|
||
## 实现方案
|
||
|
||
### 1. 微信小程序原生自定义TabBar
|
||
|
||
在 `custom-tab-bar/` 目录下创建了微信小程序原生自定义TabBar组件：
|
||
|
||
- `index.js` - 组件逻辑，根据用户类型动态生成TabBar配置
|
||
- `index.wxml` - 模板文件
|
||
- `index.wxss` - 样式文件
|
||
- `index.json` - 组件配置文件
|
||
|
||
### 2. UniApp兼容的自定义TabBar组件
|
||
|
||
创建了 `components/CustomTabBar/CustomTabBar.vue` 组件，支持多端兼容：
|
||
|
||
- 支持微信小程序、H5、APP等多端
|
||
- 响应式设计，根据用户类型动态显示
|
||
- 支持消息徽章显示
|
||
- 支持页面跳转逻辑
|
||
|
||
### 3. 配置修改
|
||
|
||
在 `pages.json` 中启用了自定义TabBar：
|
||
|
||
```json
|
||
"tabBar": {
|
||
"custom": true,
|
||
// ... 其他配置
|
||
}
|
||
```
|
||
|
||
## 使用方法
|
||
|
||
### 1. 在页面中引入自定义TabBar
|
||
|
||
```vue
|
||
<template>
|
||
<view class="page">
|
||
<!-- 页面内容 -->
|
||
|
||
<!-- 自定义tabbar -->
|
||
<CustomTabBar :currentPage="0" />
|
||
</view>
|
||
</template>
|
||
```
|
||
|
||
### 2. 用户类型判断
|
||
|
||
组件会自动从 `useUserStore` 中获取用户信息，根据用户登录状态和 `userInfo.userType` 字段判断用户类型：
|
||
|
||
```javascript
|
||
// 用户类型说明
|
||
// 未登录: 默认显示求职者tabbar
|
||
// 0: 企业用户 - 显示"发布岗位"
|
||
// 1: 求职者 - 显示"招聘会"
|
||
// 2: 网格员 - 显示"招聘会"
|
||
// 3: 政府人员 - 显示"招聘会"
|
||
```
|
||
|
||
### 3. 动态切换用户类型
|
||
|
||
当用户登录状态或类型发生变化时，TabBar会自动更新：
|
||
|
||
```javascript
|
||
// 未登录状态：自动显示求职者tabbar
|
||
// 登录后根据用户类型显示对应tabbar
|
||
|
||
// 切换用户类型
|
||
userInfo.value.userType = 1; // 切换到求职者
|
||
uni.setStorageSync('userInfo', userInfo.value);
|
||
|
||
// 登出时清除用户信息，自动回到未登录状态
|
||
userStore.logOut(false);
|
||
```
|
||
|
||
## 页面配置
|
||
|
||
### 已配置的页面
|
||
|
||
- `pages/index/index.vue` - 首页（currentPage: 0）
|
||
- `pages/careerfair/careerfair.vue` - 招聘会页面（currentPage: 1）
|
||
- `pages/chat/chat.vue` - AI+页面（currentPage: 2）
|
||
- `pages/msglog/msglog.vue` - 消息页面（currentPage: 3）
|
||
- `pages/mine/mine.vue` - 我的页面（currentPage: 4）
|
||
|
||
### 测试页面
|
||
|
||
- `pages/test/tabbar-test.vue` - TabBar功能测试页面
|
||
|
||
## 技术特点
|
||
|
||
1. **响应式设计**：根据用户类型动态显示不同的导航项
|
||
2. **多端兼容**：支持微信小程序、H5、APP等平台
|
||
3. **消息徽章**：支持显示未读消息数量
|
||
4. **页面跳转**：智能判断tabBar页面和普通页面的跳转方式
|
||
5. **用户类型监听**：实时监听用户类型变化并更新TabBar
|
||
|
||
## 注意事项
|
||
|
||
1. 确保在 `pages.json` 中设置了 `"custom": true`
|
||
2. 每个页面的 `currentPage` 参数需要正确设置
|
||
3. 用户类型存储在 `userInfo.userType` 字段中
|
||
4. 组件会自动监听用户类型变化并更新显示
|
||
|
||
## 测试方法
|
||
|
||
1. 访问测试页面：`/pages/test/tabbar-test`
|
||
2. 切换不同的用户类型
|
||
3. 观察底部TabBar的变化
|
||
4. 测试页面跳转功能
|
||
|
||
## 故障排除
|
||
|
||
如果TabBar不显示或显示异常：
|
||
|
||
1. 检查 `pages.json` 中的 `custom: true` 配置
|
||
2. 确认用户信息是否正确存储
|
||
3. 检查组件是否正确引入
|
||
4. 查看控制台是否有错误信息
|