uniapp使用uni.setTabBarItem动态切换导航栏

登录时，需要根据不同的角色进入不同的主页，并且显示不同的导航栏，根据DCloud官网的API介绍，使用`uni.setTabBarItem`可以动态切换导航栏，但是其中的`pagePath`,`text`等关键参数修改均不生效，`iconPath`参数可以修改，但不重要，无法实现跳转页面的动态切换，于是转换思路，使用`visible`属性来实现动态切换的效果。

首先，需要在`pages.json`中定义所有导航页面，注意，是所有的，包含不同用户的导航页面

例如，我定义了10个导航按钮，前5个显示(不填`visible`参数时默认为`true`)，后5个页面隐藏(`visible = false`)

"tabBar": {
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "color": "#7A7E83",
    "selectedColor": "#0871E3",
    "iconfontSrc": "/static/fonts/iconfont.ttf",
    "list": [
        {
            "pagePath": "pages/index/index",
            "text": "%page.index1%",
            "iconfont": {
                "text": "\ue6a6",
                "selectedText": "\ue6a6",
                "fontSize": "22px",
                "color": "#7A7E83",
                "selectedColor": "#0871E3"
            }
        },
        {
            "pagePath": "pages/distributionManagement/distributionManagement",
            "text": "%page.index2%",
            "iconfont": {
                "text": "\ue60a",
                "selectedText": "\ue60a",
                "fontSize": "22px",
                "color": "#7A7E83",
                "selectedColor": "#0871E3"
            }
        },
        {
            "pagePath": "pages/report/report",
            "text": "%page.index3%",
            "iconfont": {
                "text": "\ue61e",
                "selectedText": "\ue61e",
                "fontSize": "22px",
                "color": "#7A7E83",
                "selectedColor": "#0871E3"
            }
        },
        {
            "pagePath": "pages/customerManage/customerManage",
            "text": "%page.index4%",
            "iconfont": {
                "text": "\ue639",
                "selectedText": "\ue639",
                "fontSize": "22px",
                "color": "#7A7E83",
                "selectedColor": "#0871E3"
            }
        },
        {
            "pagePath": "pages/mine/mine",
            "text": "%page.index5%",
            "iconfont": {
                "text": "\ue608",
                "selectedText": "\ue608",
                "fontSize": "22px",
                "color": "#7A7E83",
                "selectedColor": "#0871E3"
            }
        },
        {
            "pagePath": "pages/foreign/index/index",
            "text": "%page.index1%",
            "iconfont": {
                "text": "\ue6a6",
                "selectedText": "\ue6a6",
                "fontSize": "22px",
                "color": "#7A7E83",
                "selectedColor": "#0871E3"
            },
            "visible": false
        },
        {
            "pagePath": "pages/foreign/distributionManagement/distributionManagement",
            "text": "%page.index2%",
            "iconfont": {
                "text": "\ue60a",
                "selectedText": "\ue60a",
                "fontSize": "22px",
                "color": "#7A7E83",
                "selectedColor": "#0871E3"
            },
            "visible": false
        },
        {
            "pagePath": "pages/foreign/report/report",
            "text": "%page.index3%",
            "iconfont": {
                "text": "\ue61e",
                "selectedText": "\ue61e",
                "fontSize": "22px",
                "color": "#7A7E83",
                "selectedColor": "#0871E3"
            },
            "visible": false
        },
        {
            "pagePath": "pages/foreign/customerManage/customerManage",
            "text": "%page.index4%",
            "iconfont": {
                "text": "\ue639",
                "selectedText": "\ue639",
                "fontSize": "22px",
                "color": "#7A7E83",
                "selectedColor": "#0871E3"
            },
            "visible": false
        },
        {
            "pagePath": "pages/foreign/mine/mine",
            "text": "%page.index5%",
            "iconfont": {
                "text": "\ue608",
                "selectedText": "\ue608",
                "fontSize": "22px",
                "color": "#7A7E83",
                "selectedColor": "#0871E3"
            },
            "visible": false
        }
    ]
}

在登录时，提交到后台校验，并判断该用户的系统角色，例如我的系统中，有「普通用户」和「外商用户」两种角色，登录成功后将信息返回到前端。

例如，前端判断到这个用户是「外商用户」，那么循环10次（因为总共有10个导航页面），将前5个导航页面隐藏，后5个导航页面显示：

login() {
	let data = {} // 发送请求到后端校验登录信息得到data
	let isForeign = data.isForeign // 是否是外商用户
	// 如果是外商，隐藏普通用户页面，显示外商页面
	if (isForeign) {
		// 隐藏前5个导航，显示后5个导航页面
		for (let i = 0; i < 10; i++) {
			let visible = true
			if (i < 5) {
				visible = false
			}
			uni.setTabBarItem({
				index: i,
				visible: visible
			})
		}
		// 跳转外商用户首页页面
		uni.switchTab({
			url: '/pages/foreign/index/index'
		});
	} else {
		// 跳转普通用户首页页面
		uni.switchTab({
			url: '/pages/index/index'
		});
	}
}

 ⚠️请根据自己的系统进行相应的修改