前端開發~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>