uniapp开发APP实现导航栏顶部搜索功能

效果图如下：

 在page.json中配置searchInput

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "订单信息",
		"app-plus": {
			"titleNView": {
				"searchInput":{
					"placeholder": "请输入订单关键字",
					"borderRadius":"50rpx",
					"backgroundColor": "#f1f1f1",
					"align":"left"  //对齐方式
				}
			}
		}
	}
},

navigationBarTitleText配置的标题会被输入框挡住，就没有标题了。

获取搜索框中输入的值，可以使用onNavigationBarSearchInputChanged方法，和methods同级。

onNavigationBarSearchInputChanged(val) {
	console.log(val)  //val为搜索框输入的值
},

如果需要清空搜索框的值，可以使用setTitleNViewSearchInputText方法赋值为空。

var currentWebview = this.$scope.$getAppWebview();
currentWebview.setTitleNViewSearchInputText("");  //将当前页面的搜索框的值赋为空

注：在安卓真机上，onLoad，onShow，onPullDownRefresh，或通过setTitleNViewSearchInputText方法赋值为空时，都会调用 onNavigationBarSearchInputChanged 这个方法，所以如果请求列表数据时，要注意，不然会重复请求列表数据。但在ios真机上，onLoad，onShow，onPullDownRefresh，或通过setTitleNViewSearchInputText方法赋值为空时都不会调用 onNavigationBarSearchInputChanged 这个方法。

如果需要在顶部导航栏同时显示搜索框和标题，可使用app-plus的buttons实现标题的显示。

如下图所示：

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "订单信息",
		"app-plus": {
			"titleNView": {
				"searchInput":{  //搜索框
					"placeholder": "请输入订单关键字",
					"borderRadius":"50rpx",
					"backgroundColor": "#f1f1f1",
					"align":"left"   //对齐方式
				},
				"buttons": [{
					"text": "订单信息",
					"float":"left",   //控制标题显示的左右位置,"float":"left"就在搜索框右边了
					"fontSize":"28rpx",
					"fontWeight":"bold",
					"width":"auto"   //这个一定要加
				}]
			}
		}
	}
},

注：一定要加 "width":"auto" ，如果不加，在某些手机上，标题会显示不完整。

buttons中还可以显示图标

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "订单信息",
		"app-plus": {
			"titleNView": {
				"buttons": [{
					"text": "\ue000",   //图标
					"fontSrc": "/static/icon/iconfont.ttf",
					"fontSize": "22px",
					"color": "#55D88A"
				}]
			}
		}
	}
},