uniapp导航栏使用iconfont

        电商项目中，导航栏除了该页面的名称之外还会有搜索，消息通知等此类功能。实现该功能，我们可以使用自定义导航栏来实现，当然我们也可以通过配置导航栏属性来实现（微信小程序不兼容）。

        如下图，我们通过对导航栏的设置来实现导航栏左右两侧的按钮，也通过iconfont来实现搜索图标和消息图标的显示。

         所需准备：在iconfont中找到自己所需的图标，并添加入库，添加到自己的项目中下载至本地，解压压缩包可得下图文件夹（详细过程不再说明，不清楚的可查看本人发布的‘iconfont在uniapp项目中的使用’，里面有详细介绍）

我们可以看到有文件iconfont.ttf，将它放到我们的项目中static文件夹下，

 

         下面来配置pages.json文件：

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "商城",
		"app-plus": {
			"titleNView": {
			    "buttons": [ //自定义两个button
				    {
					    "float": "left", //所在位置
					    "fontSrc": "./static/iconfont.ttf", //图标路径
					    "text": "\ue623" // 图标名称
			    	},
				    {
				    	"float": "right",
					    "fontSrc": "./static/iconfont.ttf",
				    	"text": "\ue604"
			   	    }
			    ]
		    }
	    }
    }
}

其中，要特别注意的是buttons的text属性，文档中也表明

 那么，我们改如何得到这个text的名称呢？

还需要我们返回iconfont官网，如下图

 一定要取unicode下的名称，如 垃圾桶   那么我们不仅要去掉“；”，还要将前3位‘&#x’换成‘\u’，即“ ” 换成‘\ue616’，即可实现垃圾桶图标的显示。