uni-app中,在项目开发过程时,如果需要在导航栏中设置图标和搜索框,可以使用框架原生的导航栏配置。
在 pages.json 文件下的相应 page 下配置 style 的 titleNView 属性。如下所示:
{
"path": "pages/tabBar/home",
"style": {
"app-plus":{
"titleNView":{ //主页导航栏设置
"type":"transparent", //导航栏渐变
"searchInput":{ //搜索框
"backgroundColor":"#FFFFFF",
"borderRadius":"15px", //不支持upx
"placeholder":"搜索商品",
"placeholderColor":"#606266",
"disabled":true ,
"width" : "225px"
},
"buttons":[{
//搜索框左边图标
"fontSrc":"/static/icons/yticon.ttf",
"text": "\ue60d",
"fontSize": "26",
"color": "#303133",
"float":"left",
"backgroundColor":"rgba(0,0,0,0)",
"width":"60px"
},
{
//搜索框右边图标
"fontSrc":"/static/icons/yticon.ttf",
"text": "\ue744",
"fontSize": "26",
"color": "#303133",
"float":"right",
"backgroundColor":"rgba(0,0,0,0)",
"width":"60px"
}]
}
}
}
},
这里特别注意,官方给出的导航栏内部属性中并没有 width 项,实际上是可以通过设置 width 项改变导航栏内图标和搜索框之间的距离的