uni-app关于顶部导航添加icon图标并绑定事件！小白教程！

效果图如下：

一，下载导入uni-app插件。

uni-icons 图标 - DCloud 插件市场

下载并导入

二，找到uniicons.ttf文件，移动到项目对应static/fonts/文件夹中。

三，在pages.json文件中配置。

{
			"path" : "pages/menuPage/faultRepairReport/faultRepairReport",
			"style" : 
			{
				"navigationBarTitleText" : "故障报修",
				"app-plus": {
					"titleNView": {
						"buttons": [
							{
								"color": "#5F3DB8",
								"fontSize": "60rpx",
								"text": "\ue6c7",
								"fontSrc": "static/fonts/uniicons.ttf"
							}
						]
					}
				}
			}
		},

注意：text 名称不是icons的图标名称，需要在uni-icons 图标 | uni-app官网 (dcloud.net.cn)

然后复制icons名字去文件uniicons_file_vue.js中搜索，操作如下图：

四，绑定事件

在所在页面绑定事件

methods: {
			
		},
		onNavigationBarButtonTap(e) {
			console.log('自定义按钮被点击')
		}