uniapp修改底部导航栏

最新推荐文章于 2025-03-16 12:42:12 发布

z饭团

最新推荐文章于 2025-03-16 12:42:12 发布

阅读量3.2k

点赞数

文章标签：前端 css3 css

本文链接：https://blog.csdn.net/qq_45193707/article/details/123085862

版权

本文介绍了uniapp中如何实现底部导航栏TabBar的设置，包括color、selectedColor、backgroundColor和borderStyle等参数的用法，并提供了详细的list配置示例，展示了如何定义页面路径、图标和文字等信息，帮助开发者创建自定义的底部导航栏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp 实现底部导航栏 - tabBar的使用方法

tabBar参数说明
color：导航栏字体颜色

selectedColor：选中后字体的颜色

backgroundColor：底部背景颜色

borderStyle：底部的border颜色，只能是“black”或者“white”

list：对象，包含以下这些选项
{

pagePath：页面路径
text：底部导航文字
iconPath：没选中前的图标路径
selectedIconPath：选中后的图标路径
}

{
      "pages":[
            ...
      ],
      "tabBar": {
			"color":"#8a8a8a",
			"selectedColor":"#00aa00",
			"borderStyle":"black",
			"backgroundColor":"#ffffff",
			"list": [
				{
					"pagePath":"pages/index/index",
					"text":"首页",
					"iconPath":"static/home_normal.png",
					"selectedIconPath":"static/home.png"
				},
				{
					"pagePath":"pages/search/search",
					"text":"发现",
					"iconPath":"static/search_normal.png",
					"selectedIconPath":"static/search.png"
				},
				{
					"pagePath":"pages/me/me",
					"text":"我的",
					"iconPath":"static/me_normal.png",
					"selectedIconPath":"static/me.png"
				}
			]	
		 },
      "globalStyle": {
		...
	}
}