效果图如下:
一,下载导入uni-app插件。
下载并导入
二,找到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('自定义按钮被点击')
}