uni-app配置底部导航栏_uniapp配置底部导航-CSDN博客

本文链接：https://blog.csdn.net/m0_74265396/article/details/132003214

这篇文章详细描述了如何在uni-app中配置启动页、导航栏样式、全局背景色以及tabBar的设计，包括图片路径和颜色选择等。

摘要由CSDN通过智能技术生成

直接在page.json中进行配置，四个参数均需要配置，所需要的图片必须

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "微信"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",//导航栏颜色
		"navigationBarTitleText": "仿微信",//导航栏名称
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus":{
			// "titleNView":false,//取消原生导航
			"scrollIndicator":"none"//取消滚动条
		}
	},
	"tabBar":{
		"borderStyle":"black",//边框颜色
		"backgroundColor":"#F7F7F7",//背景颜色
		"color":"#000000",//默认颜色
		"selectedColor":"#07C160",//选中的颜色
		"list":[
			{
				"iconPath":"static/xiaoxi.png",
				"selectedIconPath":"static/xiaoxi1.png",
				"text":"消息",
				"pagePath":"pages/index/index"
			},
			{
				"iconPath":"static/faxian.png",
				"selectedIconPath":"static/faxian1.png",
				"text":"发现",
				"pagePath":"pages/tongxunlu"
			},
			{
				"iconPath":"static/tongxunlu.png",
				"selectedIconPath":"static/tongxunlu1.png",
				"text":"通讯录",
				"pagePath":"pages/faxian"
			},
			{
				"iconPath":"static/wo.png",
				"selectedIconPath":"static/wo1.png",
				"text":"我",
				"pagePath":"pages/wo"
			}
		]
	}
}

是英文名字。