uniapp 实现不同用户展示不同的tabbar(底部导航栏)_uni-app自定义tabbar

最近在做一个uniapp开发的小程序遇到一个需求，希望不同用户登录后展示不同的tabbar页面，但是uniapp项目中的pages.json是只有一个list数组的，并且是不能写成动态效果，为了实现这个需求，便自定义了tabbar组件

一、基础配置

1. 配置tabbar

pages.json配置tabbar的基本路径（只需路径即可）

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
		    "path" : "pages/login/login",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "",
		        "enablePullDownRefresh": false
		    }
		    
		},
    {
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": ""
			}
		}
	    ,{
            "path" : "pages/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/warn/warn",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
  "tabBar": {
    "color": "#999",
    "selectedColor": "#0aa671",
    "borderStyle": "white",
    "list": [
        {
            "pagePath": "pages/index/index"
        },
        {
            "pagePath": "pages/warn/warn"
        },
        {
            "pagePath": "pages/my/my"
        }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

2. 创建tabbar组件

• 第一步：在项目中创建components文件夹，并在文件夹下创建tabbar组件声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】