uni-app开发（四）：项目实战之仿糗百搜索页

一、搜索框UI基本实现

1、首页到搜索界面的跳转事件

• 监听原生标题栏搜索输入框点击事件：框架-生命周期-页面生命周期中的onNavigationBarSearchInputClicked（）
• 跳转路由事件：API-路由与页面跳转中的uni.navigateTo

indes.vue文件中的data中添加监听

//监听搜索框点击事件
		onNavigationBarSearchInputClicked(){
			// 跳转到搜索界面
			uni.navigateTo({
				url:"../search/search"
			})
		},

2、搜索界面搜索功能UI展示
参照之前写的首页的搜索UI，将代码复制到pages.json文件中配置search页面的style处

            "path" : "pages/search/search",
            "style" : {
				"app-plus":{//设置编译到 App 平台的特定样式
					"scrollIndicator":"none",//隐藏滚动条
					"bounce":"none",//下拉效果隐藏
					"titleNView":{//导航栏
						 "searchInput":{// 搜索框配置
							 "align":"left",
							 "backgroundColor":"#F7F7F7",
							 "borderRadius":"4px",
							 "placeholder":"搜索糗事",
							 "placeholderColor":"#CCCCCC",
							 "disabled":false
						 },
						 
						 "buttons":[//配置按钮
							 {// 右边
								 "color":"#000000",								 
								 "colorPressed":"#BBBBBB",
								 "float":"right",
								 "fontSize":"16px",
								 "text":"取消"
							 }
						 ]
					}
				}
			}

3、隐藏左侧返回按钮
框架 - 配置 - app-plus 中没有相关属性的设置，但是提示更多配置项参考 WebviewStyles，点击链接找到对应属性autoBackButton设置为false则不显示返回按钮

"app-plus":{//设置编译到 App 平台的特定样式
		"scrollIndicator":"none",//隐藏滚动条
			"bounce":"none",//下拉效果隐藏
			"titleNView":{//导航栏
+					"autoBackButton":"false",//隐藏返回图标
				 "searchInput":{// 搜索框配置
					 "align":"left",
					 "backgroundColor":"#F7F7F7",
					 "borderRadius":"4px",
					 "placeholder":"搜索糗事",
					 "placeholderColor":"#CCCCCC",
					 "disabled":false
				 },
				 
				 "buttons":[//配置按钮
					 {// 右边
						 "color":"#000000",								 
						 "colorPressed":"#BBBBBB",
						 "float":"right",
						 "fontSize":"16px",
						 "text":"取消"
					 }
				 ]
			}
		}

4、点击取消文字返回首界面（原生标题导航按钮点击事件）

• 框架-生命周期-页面生命周期中有onNavigationBarButtonTap用于监听原生标题栏按钮点击事件，参数为Object
• API-路由与页面跳转中uni.navigateBack用于关闭当前页面，返回上一页面或多级页面（参数delta可设置返回页数，默认为1）

//监听原生标题栏按钮点击事件
onNavigationBarButtonTap(e){
	if(e.index==0){
		// 返回上一页面
		uni.navigateBack({
			delta: 1
		});
	}
},

二、搜索监听事件处理

1、页面生命周期中监听原生标题栏搜索输入框输入内容变化事件onNavigationBarSearchInputChanged
2、监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发——onNavigationBarSearchInputConfirmed

onNavigationBarSearchInputChanged(e){
	console.log("输入搜索框内容：" + JSON.stringify(e))
},

onNavigationBarSearchInputConfirmed(e){
	console.log("点击搜索内容：" + JSON.stringify(e))
},