uni-app配置导航输入框

关注

原创最新推荐文章于 2026-04-03 02:32:08 发布 2.9k 阅读 AI 写同款· GEO 优化 ›

uniapp中uview组件库的Input 输入框 的使用方法去除fixedautosize字段此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。应该在u-form中嵌套，再嵌套u-input去实现。注意：由于在nvue下，u-input名称被uni-app官方占用，在nvue页面中请使用u--input名称，在vue页面中使用u--input或者u-input均可。阅读详情

1 引言

在日常开发过程中，顶部导航栏的功能可谓很常见，所以掌握这个小技巧可以大大减少难度，那么我们要如何实现这一功能呢，其实很容易，uni-app已经封装好了，我们只需简单的配置一下就OK了，下面我们来了解一下要该如何配置该功能。

2 导航栏配置项

2.1 app-plus配置项

https://uniapp.dcloud.io/collocation/pages?id=app-plus

2.2 导航栏

https://uniapp.dcloud.io/collocation/pages?id=app-titlenview

2.3 搜索框

https://uniapp.dcloud.io/collocation/pages?id=app-titlenview-searchinput

3 使用案例

在pages.json配置导航栏，那个页面需要用到导航栏就在那个页面配置就OK了，如下所示（在search页面配置导航栏）

{
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"app-plus": {
				"titleNView": {
					"searchInput": {
						"backgroundColor": "#fff",
						"borderRadius": "6px",
						"placeholder": "请输入搜索内容"
					}
				}
			}
		}
	}],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#1cbbb4",
		"backgroundColor": "#F8F8F8"
	}
}