当前位置:   article > 正文

uniapp 实现不同用户展示不同的tabbar(底部导航栏)_uni-app自定义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】
推荐阅读
相关标签