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",
							 "