uniapp 原生导航栏

在项目开发中, 想要自定义一个导航栏, 做完之后发现坑还是不少

需求: 导航栏添加搜索框与搜索图标

pages.json配置文档

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 它类似微信小程序中app.json的页面管理部分。 代码:

效果

效果

搜索框配置属性

自定义按钮属性

之前的内容都是官方文档里有的, 主要是自定义button的样式, 官方没有说的很清楚

我刚看到pages.json里自定义button的图标需要字体图标时有点懵逼

其实可以在阿里巴巴矢量图标库里引用(之前都是使用的图片图标)

设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

具体怎么查找添加图标就不赘述了

拿这个搜索图标举例, 点击使用帮助可以查看矢量图标的使用方法, 只查看最后一种ios引用(因为ios也是用ttf字体图标引用) 官方有小提示

返回项目

选择将图标下载至本地

官方对于text属性的说明 按钮上显示的文字。使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue123"（注意不能写成"\e123"）。

每次项目添加新图标之后, 都需要重新下载ttf字体图标文件

页面属性中导航栏相关事件