uniapp中导航栏的配置

tabBar

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。

在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。

---

在pages.json文件中

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"app-plus": {  
					"titleNView": false  //去掉h5顶部导航
				},
                "navigationStyle":"custom"  //可以去掉小程序端的顶部导航
			}
		},
		{
			"path": "pages/classify/classify",
			"style": {
				"navigationBarTitleText": "分类",
                   "app-plus": {
					"titleNView": {
						"titleColor": "#000",
						"buttons": [{
							"text": "搜索",
							"fontSize": "15px"
						}],
						"searchInput": {
							"backgroundColor": "rgb(240,240,240)",
							"borderRadius": "15px",
							"placeholder": "请输入品牌分类商品名称",
							"autoFocus": true
						}
					}
				}
			}
		},
		{
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "我的"
			}
		},
		{
			"path": "pages/shopList/shopList",
			"style": {
				"navigationBarTitleText": "商品列表"
			}
		},
		{
			"path": "pages/shopDetails/shopDetails",
			"style": {
				"navigationBarTitleText": "商品详情"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#cdcdcd",  //导航字体初始颜色
		"selectedColor": "#ff0000",  //导航字体被选中颜色
		"borderStyle": "black", //导航栏边线颜色
		"backgroundColor": "#ffffff", //导航栏背景颜色
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/index.png",
				"selectedIconPath": "static/index_click.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/classify/classify",
				"iconPath": "static/classify.png",
				"selectedIconPath": "static/classify_click.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/my/my",
				"iconPath": "static/my.png",
				"selectedIconPath": "static/my_click.png",
				"text": "我的"
			}
		]
	}
}

document.querySelector('.uni-page-head-hd').style.display = 'none'