uniapp 原生导航栏

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

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

pages.json配置文档

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

简单的原生导航

{
      "path": "pages/search/search",
      "style": {
        "navigationBarTitleText": "搜索",
        "navigationBarBackgroundColor": "#ffd655"
      }
    }

效果

image

添加搜索框以及图标

{
      "path": "pages/searchpage/searchpage",
      "style": {
        "navigationBarTitleText": "搜索结果",
        "app-plus": {  //app-plus 配置编译到 App 平台时的特定样式，部分常用配置 H5 平台也支持
          "titleNView": {
            // "type": "transparent", //透明渐变导航栏 App-nvue 2.4.4+ 支持
            "searchInput": {
              "backgroundColor": "#fff",
              "borderRadius": "6px", //输入框圆角
              "placeholder": "请输入搜索内容"
            },
            "buttons": [{  // 具体说明请继续往下看
              "text": "\ue607",  // button字体图标
              "fontSrc": "/static/iconfont.ttf",
              "fontSize": "22px",
              "float": "right"  // button位置, 可以选择在左边或者右边
            }]
          }
        }
      }
    }

效果

image

搜索框配置

搜索框配置属性

image

自定义按钮

自定义按钮属性

image

具体配置可以查看文章顶部的官方文档

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

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

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

阿里巴巴矢量图标库

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

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

image
图标可以 unicode引用 font-class引用 symbol引用 以及使用到安卓以及ios平台

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

image

在这里只说明怎么引用到uni.app中

返回项目

选择将图标下载至本地

image

解压之后将iconfoot.ttf复制到uniapp项目中

image

我们再看一下刚才uniapp的button配置

image

fontSrc需要的文件有了, 那text属性怎么设置?
在刚才阿里巴巴矢量图标库的项目页, 鼠标浮在图标上会有操作可选

image

选择编辑图标

image

箭头所指的的unicode码就是text属性要设置的

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

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

监听导航栏事件

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

image