uview 根据不同角色动态修改 tabbar

本文主要是介绍uview 根据不同角色动态修改 tabbar，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求

应用需要根据登录的角色属性来渲染不同的 tabbar

效果如下图所示

思路

在每个tabBar 页面添加如下代码（用 u-tabbar 会自动隐藏原来的 tabbar）

<template><div><u-tabbar :list="tabbar" :mid-button="false"></u-tabbar></div>
</template>
<script>data(){return {tabbar:[]}}onLoad(){// tabbar 的值跟你的项目有关，这里只是举例子this.tabbar = [{iconPath: "/static/uview/example/component.png",selectedIconPath: "/static/uview/example/component_select.png",text: '组件',count: 2,isDot: true,pagePath: "/pages/index/index"},{iconPath: "/static/uview/example/js.png",selectedIconPath: "/static/uview/example/js_select.png",text: '工具',midButton: true,pagePath: "/pages/js/index"},{iconPath: "/static/uview/example/template.png",selectedIconPath: "/static/uview/example/template_select.png",text: '模板',pagePath: "/pages/template/index"},];}
</script>

然后就可以试一试了
我是把tabbar 这些数据放到了vuex里，点击按钮之后，更新tabbar，并重新赋值。

遇到的问题

1. 登录成功后切换到tabbar 页面，报错 object
   答：应该是路径写错的问题

   // 错误的写法
   wx.switchTab({url: 'pages/staffInfo/index'
   })// 正确的写法
   wx.switchTab({// url: '../../staffInfo/index',	// 这个也可以url: '/pages/staffInfo/index'
   })

2. 其实做完之后还会遇到个问题，因为小程序起始页是固定的，如果当前角色的tabbar 中没有起始页，如何处理？

   答：我的做法是，在起始页中判断并跳转。

参考

1. Tabbar 底部导航栏,实战部分比较有用，可以下demo自己试一下。

2. uniapp中使用Vuex存储全局变量和方法

3. 关于button按钮跳转的Object报错

这篇关于uview 根据不同角色动态修改 tabbar的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---