uni-app自定义导航按钮

1 使用步骤

1.1下载阿里矢量图标

https://www.iconfont.cn/

1.2 通过下载解压后的iconfont.css文件查看content，如

.icon-saoma:before {
  content: "\e6cb";
}

1.3 将字体图标引入项目

把解压后的iconfont.ttf文件复制到项目中，比如放在static目录下

1.4 配置自定义导航图标

在pages.json配置导航自定义图标，哪个页面需要就在相应的位置配置

官方文档：https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-buttons

这里需要注意buttons下的两个参数

fontSrc：字体路径
text     ：字体编号（使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue6cb"）

配置层级如下所示

pages-->style-->app-plus-->titleNView-->buttons 

2 使用案例 

pages

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

style

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

app-plus

https://uniapp.dcloud.io/collocation/pages?id=app-plus

titleNView

https://uniapp.dcloud.io/collocation/pages?id=app-titlenview

buttons

https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-buttons

 

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"app-plus": {
					"titleNView": {
						"buttons": [ //原生标题栏按钮配置,
							{
								"type":"none",
								"float":"left",
								"fontWeight":"bold",
								"fontSrc":"/static/iconfont.ttf",
								"text":"\ue6cb"
							},
							{
								"type":"favorite",
								"float":"right"
							}
						],
						"searchInput": {
							"backgroundColor": "#fff",
							"borderRadius": "6px", //输入框圆角
							"placeholder": "请输入搜索内容",
							"disabled": true //disable时点击输入框不置焦，可以跳到新页面搜索
						}
					}
				}
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#1cbbb4",
		"backgroundColor": "#F8F8F8"
	}
}

3 效果