【uni-app】创建底部或者顶部导航栏

目录

1、创建底部导航栏

2、自定义顶部导航栏组件

第一个图的代码 

第二个图的代码

---

1、创建底部导航栏

（1）新建导航页面

在 pages 中新建tabBar目录，在目录下创建choose和me目录。然后在pages.json的pages中，生成新页面的默认配置代码。（不一定非要创建在一个目录下，可以独立成一个文件）

（2）配置底部导航栏结构

在 pages.json 中，配置 tabBar 注意：pages 的第一个 path 必须与 tabBar 的第一个 pagePath 相同否则不显示底部导航

"pages": [{
			"path": "pages/tabBar/choose/index",
			"style": {
				"navigationBarTitleText": "行情",
				"navigationStyle": "custom",
				"navigationBarTextStyle": "white"
			}
		},
		{
			"path": "pages/tabBar/me/index",
			"style": {
				"navigationBarTitleText": "量化平台",
				"navigationStyle": "custom",
				"navigationBarTextStyle": "white"

			}
		}
	],
	"tabBar": {
		"color": "#d4dbe3",
		"selectedColor": "#000000",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/tabBar/choose/index",
				"iconPath": "static/hqicon2.png",
				"selectedIconPath": "static/hqicon1.png",
				"text": "自选"
			},
			{
				"pagePath": "pages/tabBar/me/index",
				"iconPath": "static/gerenicon2.png",
				"selectedIconPath": "static/gerenicon1.png",
				"text": "我的"
			}
		]
	},

2、自定义顶部导航栏组件

第一个图的代码 

顶部添加的内容：VIP图标、标题、背景图片

（1）在components中创建nabbar组件

（2）在所需页面引用

第二个图的代码

（1）在components中创建navbar组件

（2）在页面使用

（3）修改pages.json

如果是全局设置，那就在globalStyle中设置

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"navigationStyle": "custom" //设置自定义导航栏
	}

如果是单页面则是在对应页面中使用

"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "首页",
			"enablePullDownRefresh": false,
			"navigationStyle": "custom" //设置自定义导航栏
		}
	}]