前端開發~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. onNavigationBarSearchInputChangedonNavigationBarSearchInputConfirmed這兩個頁面生命週期函數來進行相關的實現,通過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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章