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

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

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

它类似微信小程序中app.json的页面管理部分。

代码:

简单的原生导航

{

"path": "pages/search/search",

"style": {

"navigationBarTitleText": "搜索",

"navigationBarBackgroundColor": "#ffd655"

}

}

复制代码

效果

添加搜索框以及图标

{

"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位置, 可以选择在左边或者右边

}]

}

}

}

}

复制代码

效果

搜索框配置

搜索框配置属性

自定义按钮

自定义按钮属性

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

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

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

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

阿里巴巴矢量图标库

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

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

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

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

官方有小提示

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

返回项目

选择将图标下载至本地

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

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

fontSrc需要的文件有了, 那text属性怎么设置?

在刚才阿里巴巴矢量图标库的项目页, 鼠标浮在图标上会有操作可选

选择编辑图标

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

官方对于text属性的说明

按钮上显示的文字。使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue123"(注意不能写成"\e123")。

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

监听导航栏事件

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