首页 APP开发 正文内容

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

2023年10月30日 , , , 301

很多开发者在刚接触 uni-app 开发时,对导航栏的实现比较懵,也不知道在哪里修改图标。这篇文章给大家讲清楚。

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

app tab bar
app tab bar

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