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

一、搜索框UI基本实现 1、首页到搜索界面的跳转事件

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

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

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

【uni-app开发（四）（项目实战之仿糗百搜索页）】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)) },