uniapp系列-03顶部图标and文字开发

1.更改顶部文字及背景颜色

在pages.json中的"style"下

"navigationBarTitleText": "易书",
				"navigationBarBackgroundColor": "#FFFFFF",

2.左右两边的图标按钮

fontSrc为图标的地址,在之前iconfont网站已经下载的图标安装包中找到iconfont.ttf文件,放在static文件夹中,如图:

在"app-plus"中添加fontSrc的地址,即"./static/iconfont.ttf"

再添加"text",iconfont中拿这个代码

这个图标代码复制完后需要修改一下变为\u开头

复制的代码原本为  

我们需要修改为\ue622

重复操作

app-plus完整代码:

"app-plus": {
					"titleNView": {
						"buttons": [
							{
								"float": "left",
								"fontSrc": "./static/iconfont.ttf",
								"text": "\ue622"
							},
							{
								"float": "right",
								"fontSrc": "./static/iconfont.ttf",
								"text": "\ue600"
							}
						]
					}
				}

最后运行成功结果:

需要注意的是,这个顶部导航只在app中有,小程序中是无法显示的,小程序的添加方法后续再说,埋坑