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，并重新赋值。

遇到的问题

登录成功后切换到tabbar 页面，报错 object 在这里插入图片描述
答：应该是路径写错的问题

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