uniapp 导航栏tabBar

超、凢脫俗 2021-07-24 23:15 786阅读 0赞

注意:
    (1)当设置导航栏在顶部,即position为top时,只能配置文字,不能配置图标
    (2)当设置导航栏在顶部时,仅微信有效
    (3)图标不接受网络图片和字体图标
    (4)导航栏选项2-5个
    
    1、在pages.json的"pages"的数组中先注册页面
    2、与"globalStyle"同级设置导航栏	
    	
    	"tabBar":{
    	"list":[  设置选项
    		{
    			"text":"bar名称",
    			"pagePath":"页面路径",
    			"iconPath":"bar图片路径",
    			"selectedIconPath":"选中的图片路径"
    		},
    			...至少设置2个,最多5个
    	],
    	"color":"16进制字体颜色",
    	"selectedColor":"16进制选中的字体颜色",
    	"backgroundColor":"导航栏背景色",
    	"position":"bottom",  导航栏位置,bottom/top
    	"borderStyle":"white"  导航栏边框色,white/black,App支持其他颜色
    	
    	}

[tabBar文档再滚动条3/4处][tabBar_3_4]

代码示例:

{ 
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		
    		{ 
    			"path": "pages/message/message",
    			"style": { 
    				"navigationBarTitleText": "study1",
    				"backgroundColor":"#4CD964",
    				"h5":{ 
    					"pullToRefresh":{ 
    						"color":"#007AFF",
    						"offset":"20%"
    					}
    				}
    			}
    		},
    		
    		{ 
    			"path": "pages/index/index",
    			"style": { 
    				"navigationBarTitleText": "uni-app"
    			}
    		},
    		
    		{ 
    			"path": "pages/me/me",
    			"style": { 
    				"navigationBarTitleText": "me"
    			}
    		}
    	],
    	"globalStyle": { 
    		"navigationBarTextStyle": "black",
    		"navigationBarTitleText": "uni-appaa",
    		"navigationBarBackgroundColor": "#008000",
    		"backgroundColor": "#008000",
    		"enablePullDownRefresh":true,
    		"backgroundTextStyle":"light",
    		"onReachBottomDistance":100
    	},
    	"tabBar":{ 
    		"list":[
    			{ 
    				"text":"首页",
    				"pagePath":"pages/index/index",
    				"iconPath":"static/tabs/home.png",
    				"selectedIconPath":"static/tabs/home-active.png"
    			},
    			{ 
    				"text":"信息",
    				"pagePath":"pages/message/message",
    				"iconPath":"static/tabs/message.png",
    				"selectedIconPath":"static/tabs/message-active.png"
    			
    			},
    			{ 
    				"text":"我的",
    				"pagePath":"pages/me/me",
    				"iconPath":"static/tabs/contact.png",
    				"selectedIconPath":"static/tabs/contact-active.png"
    			
    			}
    		],
    		"color":"#9CDCFE",
    		"selectedColor":"#008000",
    		"backgroundColor":"#272822",
    		"position":"top",
    		"borderStyle":"white"
    		
    	}
    }

[tabBar_3_4]: https://uniapp.dcloud.io/collocation/pages