在项目开发中, 想要自定义一个导航栏, 做完之后发现坑还是不少
需求: 导航栏添加搜索框与搜索图标
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字体图标文件
监听导航栏事件
页面属性中导航栏相关事件