前端开发~uni-app ·[项目-仿糗事百科] 学习笔记 ·009【搜索页开发】

注：前言、目录见 https://god-excious.blog.csdn.net/article/details/105312456

【035】搜索页开发（上）

页面生命周期~官方文档 https://uniapp.dcloud.io/frame?id=页面生命周期
可以在其中找到onNavigationBarSearchInputClicked这个页面生命周期函数，用于监听原生标题栏输入框点击事件

navigateto~官方文档 https://uniapp.dcloud.io/api/router?id=navigateto
可以在其中找到页面跳转的相关APi

navigateback~官方文档 https://uniapp.dcloud.io/api/router?id=navigateback
可以在其中找到页面跳转返回的相关APi

页面跳转返回按钮~官方文档 http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

开发内容

1. 首页和搜索页之间的跳转
2. 搜索页标题栏样式
3. 搜索页取消按钮返回的实现

具体方法

1. 通过页面生命周期函数onNavigationBarSearchInputClicked监听搜索框的点击事件，触发了点击事件之后使用uni.navigateTo进行页面跳转
2. 在pages.json中配置搜索页的标题栏样式，因为和首页的标题栏很相似，所以可以将首页的一些样式复制下来稍微调整一下
3. 通过页面生命周期函数onNavigationBarButtonTap监听原生标题栏按钮点击事件，通过其中的默认参数e的属性e.index可以确定按下的按钮的下标，然后当点击“取消”按钮时通过uni.navigateBack进行返回（这里只需要返回1层）

核心代码

• index.vue文件

  <template>
  	<view>
  		<!-- ...... -->
  		<!-- ...... -->
  		<!-- ...... -->
  	</view>
  </template>
  
  <script>
  	//......
  	export default {
  		//......
  		// 监听搜索框点击事件
  		onNavigationBarSearchInputClicked() {
  			uni.navigateTo({
  				url: '../search/search'
  			});
  		},
  		//......
  	}
  </script>
  
  <style>
  	
  </style>
  

• search.vue文件

  <template>
  	<view>
  		
  	</view>
  </template>
  
  <script>
  	export default {
  		data() {
  			return {
  				
  			}
  		},
  		// 监听愿生标题导航按钮点击时间
  		onNavigationBarButtonTap(e) {
  			// console.log(JSON.stringify(e));
  			// 向上返回一级
  			if (e.index === 0) {
  				uni.navigateBack({
  					delta: 1
  				});
  			}
  		},
  		methods: {
  			
  		}
  	}
  </script>
  
  <style>
  
  </style>
  

• pages.json文件

  {
  	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  		//......
          {
              "path" : "pages/search/search",
              "style" : {
  				"app-plus": {
  					"scrollIndicator":"none",
  					"titleNView": {
  						"autoBackButton": false,
  						"searchInput": {
  							"align": "left",
  							"backgroundColor": "#F7F7F7",
  							"borderRadius": "4px",
  							"placeholder": "搜索糗事",
  							"disabled": "false"
  						},
  						"buttons": [
  							{
  								"color": "#000000",
  								"colorPressed": "#BBBBBB",
  								"float": "right",
  								"fontSize": "16px",
  								"text": "取消"
  							}
  						]
  					}
  				}
  			}
          }
  		//......
      ],
  	//......
  }
  

【036】搜索页开发（下）

页面生命周期~官方文档 https://uniapp.dcloud.io/frame?id=页面生命周期

• 可以在其中找到onNavigationBarSearchInputChanged这个页面生命周期函数，用于监听原生标题栏搜索输入框输入内容变化事件
• 可以在其中找到onNavigationBarSearchInputConfirmed这个页面生命周期函数，用于监听原生标题栏输入框搜索事件

开发内容

1. 为搜索框的【输入变化】、【确认搜索】的两个事件提供一个“接口”，以后实现

具体方法

1. 用onNavigationBarSearchInputChanged和onNavigationBarSearchInputConfirmed这两个页面生命周期函数来进行相关的实现，通过console.log(JSON.stringify(e))查看相关的内容，发现这两个函数的参数对象e都只有属性text，暂时先将e.text进行打印，当做是一个“接口”

核心代码

search.vue文件

<template>
	<view>
		
	</view>
</template>

<script>
	export default {
		//......
		// 监听搜索框文本变化
		onNavigationBarSearchInputChanged(e) {
			// console.log("监听搜索框文本变化" + JSON.stringify(e));
			// 通过上面的调试观察，可以发现，对象里只有一个属性text
			
			console.log(e.text);
		},
		// 监听搜索框点击搜索按钮事件
		onNavigationBarSearchInputConfirmed(e) {
			// console.log("监听搜索框点击搜索按钮事件" + JSON.stringify(e));
			// 通过上面的调试观察，可以发现，对象里只有一个属性text
			
			console.log(e.text);
		},
		//......
	}
</script>

<style>

</style>