uni-app配置导航栏

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  项改变导航栏内图标和搜索框之间的距离的