前言
这次的项目需求是用户存在两种身份，普通用户和师傅用户，那么要根据不同的身份展示不同的tabBar菜单，看了下官方文档，难度不大，但是由于我用的框架是Taro，所以实现起来很难，试了几次Api调不通就放弃了，转为JS大法写了，但是配置方面还是得按照小程序文档来。
做成效果：
用户菜单
师傅菜单
说明
此文是Taro版，非原生，思路可供参考，毕竟JS是互通的。
1. 配置信息
- 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
- 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
由于Taro没有单目录json，所以只配了第一条就生效了
tabBar: {
custom: true,
list: [{
'pagePath': 'pages/home/index',
'text': '首页',
}, ...]
},
2. 添加 tabBar 代码文件
- 在代码根目录下添加入口文件:
custom-tab-bar/index.js
此文件编写的组件会作为自定义的tabBar展示出来
主要步骤
- custom-tab-bar/index.js里编写组件（此组件即是新的tabBar组件）
- 比如用户端有4个菜单，师傅端有3个菜单，这里我做好了标识type区分身份
const nav = [{
'url': '/pages/home/index',
'type': 1,
'text': '首页',
}, {
'url': '/pages/user1/index',
'type': 1,
'text': '用户菜单1'
}, {
'url': '/pages/user2/index',
'type': 1,
'text': '用户菜单2'
}, {
'url': '/pages/user3/index',
'type': 1,
'text': '用户菜单3'
}, {
'url': '/pages/masterhome/index',
'type': 2,
'text': '师傅首页'
}, {
'url': '/pages/master1/index',
'type': 2,
'text': '师傅菜单1'
}, {
'url': '/pages/master2/index',
'type': 2,
'text': '师傅菜单2'
}]
- 登录后拿到后端返回的身份信息，这里定义一个变量isMaster存储起来
- 然后在 custom-tab-bar/index.js里拿到isMaster，根据isMaster处理得到navList来渲染需要对应的tabBar 列表
const navList = isMaster ? nav.filter(item => item.type === 2) : data.filter(item => item.type === 1);
-
当isMaster 为true 时，tabBar显示
师傅菜单 -
当isMaster 为false 时，tabBar显示
用户菜单
觉得还不错记得点个赞，与君加油
