uni-app 如何设置底部导航栏的图标

我们在使用 uni-app 开发安卓或者 iOS APP 时，底部导航栏的图标应该怎么设置？本文说明 APP 端的导航组件的原理以及图标设置方法。

系统默认 tabbar

很多 APP 都会有底部菜单，uni-app 也帮我们内置了底部导航菜单，不需要自己去写代码，只需要简单配置参数就可以实现。这种方式只适合使用系统默认 tabbar 的项目。

图标配置方法

我们找到 uni-app 项目的 pages.json 文件，一般我们创建了新的 uni-app 项目，这个文件也会自动生成，在这个文件里有个节点 “tabbar”，按照下面的配置方式来设置导航菜单：

"tabBar": {
	"color": "#000000",
	"selectedColor": "#FF0000",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
		"pagePath": "pages/index/index",
		"iconPath": "static/image/icon_home.png",
		"selectedIconPath": "static/image/icon_home_selected.png",
		"text": "首页"
	}, {
		"pagePath": "pages/store/index",
		"iconPath": "static/image/icon_store.png",
		"selectedIconPath": "static/image/icon_store_selected.png",
		"text": "商城"
	},
{
		"pagePath": "pages/account/index",
		"iconPath": "static/image/icon_account.png",
		"selectedIconPath": "static/image/icon_account_selected.png",
		"text": "我的"
	}]
}

这样就简单配置好了一个白色背景、黑色文字，并且选中时红色的导航菜单。从代码中可以看到，"iconPath" 就是图标图片文件的路径，"selectedIconPath" 就是菜单选中状态的图片路径，只要我们准备好菜单的图标图片文件，替换路径就可以设置菜单的图标了。如果没有 UI 设计基础，最好还是让设计师来提供一个正方形的透明 PNG 图片。

注意事项

• 图标图片要用背景透明的 PNG 文件，否则导航栏会很难看；
• 图标的尺寸大小要适中，否则小了会模糊，太大又浪费空间。根据我的经验，一般使用 96x96px，你也可以直接用这个尺寸；
• 除了默认图标，还应该准备一个选中状态，主要注意的是，选中状态和默认状态一般只是改变了颜色，位置要一致，否则选中时会很突兀，影响效果。

uni-app 系统导航栏的图标设置方法就是这样了，这种方式配置简单，不需要自己实现导航的功能，但能改的地方也很少，如果要实现个性化的导航栏，比如中间菜单是凸起式的大图标，就需要自定义导航栏了。