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

快来打我* 2021-08-03 02:11 313阅读 0赞

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