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);
},