uni-app开发(3)---搜索组件开发

1、应用场景：

在APP开发的时候，我们往往会遇见点击前一页index.vue搜索框（不能输入）进入新的search.vue页面，但是搜索框可以输入的情况。

---

2、配置问题

首页index.vue页面配置

"style": {
			"app-plus": {
				"scrollIndicator": "none", //隐藏滚动条
				"bounce": "none", //关闭反弹效果
				"titleNView": {
					// 搜索框配置
					"searchInput": {
						"align": "center",
						"backgroundColor": "#F7F7F7",
						"borderRadius": "4px",
						"placeholder": "搜索糗事",
						"placeholderColor": "#CCCCCC",
						"disabled": true
					},
					//配置按钮
					"buttons": [
						// 左边
						{
							"color": "#FF9619",
							"colorPressed": "#BBBBBB",
							"float": "left",
							"fontSize": "22px",
							"fontSrc": "/static/font/icon.ttf",
							"text": "\ue609"
						},
						// 右边
						{
							"color": "#000000",
							"colorPressed": "#BBBBBB",
							"float": "right",
							"fontSize": "22px",
							"fontSrc": "/static/font/icon.ttf",
							"text": "\ue653"
						}
					]
				}
			}
		}

注意："searchInput"中"disabled": true表示搜索框不可用。点击搜索框，跳转到search.vue页面， search.vue页面的配置"searchInput"中"disabled": false便可以实现输入。对于APP端，我们可以通过配置不使用默认返回按钮，具体配置"titleNView"下面的"autoBackButton":false，（H5端无效）。

---

3、监听导航栏按钮点击事件

如果要对导航栏按钮添加事件，需要使用以下钩子，具体代码如下：

onNavigationBarButtonTap(btn) {
	console.log(btn)
	if(btn.index === 0){
		// uni.navigateBack();
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
},

---

4、监听导航栏输入改变事件与软键盘点击搜索事件 

// 监听搜索框输入变化
onNavigationBarSearchInputChanged(e) {
	console.log(e.text);
},
// 监听软键盘点击搜索事件
onNavigationBarSearchInputConfirmed() {
	console.log(e.text);
},