uni-app自定义导航图标

引言

导航栏在APP中引导说明的作用,通过导航描述,我们可以快速定位该页面的主要功能,不过现在的应用逐渐走向多元化,比如有些页面需要文字导航、有些需要图标导航、有些需要透明导航、有些需要渐进式导航、还有些根本就不需要导航,本次笔者记录一下用uni-app配置图标导航的过程。

配置选

https://uniapp.dcloud.io/collocation/pages?id=style

主要配置项

uni-app自定义导航图标_第1张图片

 使用案例

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"titleImage":"static/hot.png"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

效果

uni-app自定义导航图标_第2张图片

你可能感兴趣的:(uni-app)