uniapp 小程序中使用 uview-plus 实现不同脚色动态体现底部导航栏 tabbar ...

uniapp 小程序中使用 uview-plus 实现不同脚色动态体现底部导航栏 tabbar

在使用uniapp开辟小程序项目中，常需要根据脚色的不同动态体现底部导航栏的内容。下面我将使用uview-plus中的tabbar组件来实现这个功能。
需要注意的是uview-plus是针对vue3项目使用的，以是下面的例子不适用vue2的项目，各人有需求可以去看uview。
添加网页代码

1. <up-tabbar :value="selectTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
2.                         activeColor="#006eff">
3.                         <up-tabbar-item v-for="item in tabbars" :text="item.text" :icon="item.icon"
4.                                 @click="clickTabbar(item.name,item.path)" :key="item.name"></up-tabbar-item>
5.                 </up-tabbar>

复制代码

up-tabbar属性解说
value：当前匹配项的name值；value的值对应哪个up-tabbar-item的name值，体现哪个up-tabbar-item被选中状态。
fixed：导航栏是否固定在底部。
placeholder：fixed定位固定在底部时，是否生成一个等高元素防止塌陷。
safeAreaInsetBottom：是否为苹果X留出底部安全隔断。
activeColor：选中标签颜色。
up-tabbar-item属性解说
text：描述文本，即tabbar的名称。
icon：tabbar体现的图标。
更多具体的属性及其作用可以去uview-plus官网一探究竟。
由此可知，体现一个自定义的图标，需要name（用于体现当前tab）、text、icon、path（跳转路径）这些属性。
当点击某一个tab时，通过传入的name值和path路径就能改变选中状态，跳转到下一个tab页面去。
不同脚色展示的tabbar

创建一个用于存储不同脚色展示的tabber数据的tabbar.js文件。以下是我的项目中两种不同脚色需要展示的tabbar，各人根据自己的项目需求调整。

1. // 普通用户展示的页面
2. const commonBar = [{
3.                 name: 0,
4.                 text: '首页',
5.                 icon: 'home',
6.                 path: '/pages/index/index'
7.         },
8.         {
9.                 name: 1,
10.                 text: '订单',
11.                 icon: 'order',
12.                 path: '/pages/orders/orders'
13.         },
14.         {
15.                 name: 2,
16.                 text: '消息',
17.                 icon: 'chat',
18.                 path: '/pages/chat/chat'
19.         },
20.         {
21.                 name: 3,
22.                 text: '我的',
23.                 icon: 'account',
24.                 path: '/pages/me/me'
25.         }
26. ]
27. // 跑腿员展示的页面
28. const runnerBar = [{
29.                 name: 0,
30.                 text: '首页',
31.                 icon: 'home',
32.                 path: '/pages/index/index'
33.         },
34.         {
35.                 name: 1,
36.                 text: '接单',
37.                 icon: 'car',
38.                 path: '/pages/RecOrder/RecOrder'
39.         },
40.         {
41.                 name: 2,
42.                 text: '订单',
43.                 icon: 'order',
44.                 path: '/pages/orders/orders'
45.         },
46.         {
47.                 name: 3,
48.                 text: '消息',
49.                 icon: 'chat',
50.                 path: '/pages/chat/chat'
51.         },
52.         {
53.                 name: 4,
54.                 text: '我的',
55.                 icon: 'account',
56.                 path: '/pages/me/me'
57.         }
58. ]
60. export {
61.         commonBar,
62.         runnerBar
63. }

复制代码

使用Vuex和本地缓存来存储tabbar数据

1.         state: {
2.                 // 存储底部导航栏tabbar数据
3.                 activeTabbar: uni.getStorageSync('activeTabbar') || [],
4.                 // 选中的tabbar tabbar的name值
5.                 selectTab: uni.getStorageSync('selectTab') || 0,
6.         },
7.         mutations: {
8.                 // 将底部导航栏tabbar数据存储到本地缓存中
9.                 SET_TABBAR: (state, payload) => {
10.                         state.activeTabbar = payload;
11.                         uni.setStorageSync('activeTabbar', payload);
12.                 },
13.                 // 将当前选中的导航栏name值存储到本地缓存中
14.                 SET_CURRENT_TAB: (state, val) => {
15.                         state.selectTab = val;
16.                         uni.setStorageSync('selectTab', val);
17.                 }
18.         }，
19.         actions: {
20.         // 设置当前选中tabbar
21.                 setCurrentTab({
22.                         commit
23.                 }, val) {
24.                         commit('SET_CURRENT_TAB', val);
25.                 },
26.                 // 设置底部tabbr
27.                 SetTabbar({
28.                         commit
29.                 }, payload) {
30.                         commit('SET_TABBAR', payload);
31.                 }
32.         }

复制代码

在每个tabbar页都添加以下代码，获取tabbar相关数据

1. export default {
2.                 data() {
3.                         return {
4.                                 // tabber内容
5.                                 tabbars: this.$store.state.user.activeTabbar,
6.                                 // 选中的tabbar tabbar的name值
7.                                 selectTab: this.$store.state.user.selectTab
8.                         }
9.                 },
10.                 methods: {
11.                         // 点击当前clickTabbar name值为当前点击tabbar的name值
12.                         clickTabbar(name, path) {
13.                                 this.$store.dispatch('setCurrentTab', name);
14.                                 uni.reLaunch({path});
15.                         }
16.                 }
17.                 }

复制代码

各人根据自己代码修改一下获取store中的state数据，我是由于写在了自己的user模块中了。
注意： 在每个tabbar页面加上以上js代码的内容和开头的HTML代码，使得能够获取到tabbar数据和使UI生效
删除pages.json中tabBar的内容

删除或解释pages.json中tabBar部门的内容，使原生tabbar失效

1. "tabBar": {
2.                 "backgroundColor": "#fff",
3.                 "selectedColor": "#006eff",
4.                 "color": "#666",
5.                 // "list": [{
6.                 //                 "iconPath": "/static/icons/home.png",
7.                 //                 "selectedIconPath": "static/icons/home-active.png",
8.                 //                 "text": "首页",
9.                 //                 "pagePath": "pages/index/index"
10.                 //         },
11.                 //         {
12.                 //                 "iconPath": "/static/icons/accent_order.png",
13.                 //                 "selectedIconPath": "/static/icons/accent_order_active.png",
14.                 //                 "text": "接单",
15.                 //                 "pagePath": "pages/RecOrder/RecOrder"
16.                 //         },
17.                 //         {
18.                 //                 "iconPath": "/static/icons/orders.png",
19.                 //                 "selectedIconPath": "static/icons/orders-active.png",
20.                 //                 "text": "订单",
21.                 //                 "pagePath": "pages/orders/orders"
22.                 //         },
23.                 //         {
24.                 //                 "iconPath": "/static/icons/me.png",
25.                 //                 "selectedIconPath": "static/icons/me-active.png",
26.                 //                 "text": "我的",
27.                 //                 "pagePath": "pages/me/me"
28.                 //         }
29.                 // ]
30.         }

复制代码

选择在符合的地方设置tabBar值

各人根据自己的业务需求，在符合的地方调用Vuex中的action方法给tabBar数据设置值。我这里选择在登录成成功的时间。

1.                 // 导入tabBar列表
2.                 import {
3.                 runnerBar,
4.                 commonBar
5.         } from '../../utils/tabbar';
6.                
7.                 // 登录成功后，处理函数
8.                 loginSuccess(result) {
9.                                 // 设置用户信息
10.                                 this.$store.dispatch('GetInfo').then(res => {
11.                                         // 根据角色设置显示的tabbar
12.                                         const roles = this.$store.state.user.roles;
13.                                         if (roles.includes('runner') || roles.includes('admin')) {
14.                                         // 将tabBar列表数据传过去
15.                                                 this.$store.dispatch('SetTabbar', runnerBar);
16.                                         } else {
17.                                                 this.$store.dispatch("SetTabbar", commonBar);
18.                                         }
19.                                         this.$tab.reLaunch('/pages/index/index');
21.                                 })
22.                         }

复制代码

完结撒花！

这个还是很简单的，就是有不敷的地方，第一次点击底部导航栏，会闪一闪，之后缓存了就没事了，盼望有大神能给出解决意见。有什么不敷的也请各人多多指导，我是小白！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。