uni-app怎么自定义一个带图标的导航栏按钮

一、怎么修改

通过在page.json文件中配置页面的titleNView属性就可以自定义一个导航栏按钮，

其中还可以定义按钮的文字样式等等，最常见的就是定义一个图标按钮，但是不支持直接使用静态图片作按钮背景的方式，所以必须要引入一个字体图标，使用方法如下图：

二、字体图标怎么使用，text属性值怎么设置

具体的其他参数可以看官方文档，这里主要说明一下字体图标的使用，可以使用uni-app示例文件里面自带的uni.ttf文件(ttf文件就是字体文件)，里面有很多常用的图标，我下了一个软件打开了ttf文件如下：

这个text的编号跟这图标上的编号是对应的，例如如果想使用倒数第三排的设置图标编号是uniE532,那么text直接设成"\ue532"

 

如果想用其他的字体图标文件我推荐去阿里的图标网站https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a

搜索到合适的图标后直接加入库中(免费的网站),然后下载代码

之后就可以解压出很多文件其中包括一个可用的ttf文件，fontSrc路径有了，那么titleNView中的text应该填什么呢？

这个时候就可以打开iconfont.css文件，里面有一个content属性

直接复制，然后加一个u 就得到了text属性：  \ue61d

 

三、怎么监听这个新增的导航栏按钮点击事件

onNavigationBarButtonTap钩子函数

 

四、怎么去掉导航栏上方自带的左返回键

pages.json的app-plus下面的titleNView下有配置，autoBackButton:false。具体参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

注意调试的时候需要真机测试才可以看到效果。