uniApp學(xué)習(xí)之熱門搜索，搜索數(shù)據(jù)頁面緩存實(shí)例

更新時(shí)間：2023年10月02日 15:20:30 投稿：wdc

這篇文章主要介紹了uniApp學(xué)習(xí)之熱門搜索,搜索數(shù)據(jù)頁面緩存實(shí)例,需要的朋友可以參考下

1、熱門搜索

頁面代碼如下

<template>
	<view class="keyword">
		<view class="title">
			熱門搜索
		</view>
		<view class="tag-list">
			<view v-for="(item,index) in hostList" :key='index' @click="clickHandler(item)">
				{{item}}
			</view>
		</view>
		<view class="title space-between">
			<text>搜索歷史</text>
			<text @click="clearHistory">清空歷史</text>
		</view>
		<view class="tag-list">
			<view v-for="(item,index) in historyList" :key='index' @click="clickHandler(item)">
				{{item}}
			</view>
		</view>
	</view>
</template>
<script>
	const key = 'history_key'
	export default {
		data() {
			return {
				hostList: ['java', 'python', 'springBoot', 'SpringCloud'], //熱門搜索數(shù)據(jù)接口
				// 歷史搜索,拿本地的key
				historyList: uni.getStorageSync(key)
			}
		},
		methods: {
			clearHistory() {
				this.historyList = []
				uni.clearStorageSync(key)
			},
			clickHandler(item) {
				// 
				// #ifdef APP-PLUS
				// 獲取當(dāng)前頁面實(shí)例
				const currentWebview = this.$mp.page.$getAppWebview();
				currentWebview.setTitleNViewSearchInputText(item)
				// #endif
				// #ifdef H5
				// 清空選擇框內(nèi)容
				const placeholde = document.querySelector('.uni-page-head-search-placeholder')
				placeholde.innerHTML = ''
				const inputsearch = document.querySelector('.uni-input-input[type=search]')
				inputsearch.value = item
				// #endif
				//點(diǎn)擊之后向父組件傳入,通過key=ziChuanfu向父組件傳參，并調(diào)用父組件的方法
				this.$emit('ziChuanfu', {
					value: item
				})
			}
		}
	}
</script>
<style lang="scss">
	.keyword {
		padding: 25rpx;
		.title {
			font-size: 30rpx;
			color: #222222;
			text:last-child {
				color: #999;
			}
		}
		.tag-list {
			display: flex; //flex布局一行顯示
			flex-wrap: wrap; //flex布局自動(dòng)換行
			margin-top: 20rpx;
			margin-bottom: 60rpx;
			view {
				font-size: 25rpx;
				color: #999;
				border: 1rpx solid #999;
				border-radius: 8rpx;
				padding: 6rpx 15rpx;
				margin: 10rpx;
				overflow: hidden; //文字超出隱藏
				white-space: nowrap;
				text-overflow: ellipsis; //超出部分省略號(hào)顯示
			}
		}
	}
</style>

對data中配置的 hostList 數(shù)組進(jìn)行遍歷

<view class="tag-list">
			<view v-for="(item,index) in hostList" :key='index' @click="clickHandler(item)">
				{{item}}
			</view>
		</view>

hostList 數(shù)組如下

hostList: ['java', 'python', 'springBoot', 'SpringCloud'], //熱門搜索數(shù)據(jù)接口

對搜索歷史進(jìn)行遍歷historyList

        <view class="title space-between">
			<text>搜索歷史</text>
			<text @click="clearHistory">清空歷史</text>
		</view>
		<view class="tag-list">
			<view v-for="(item,index) in historyList" :key='index' @click="clickHandler(item)">
				{{item}}
			</view>
		</view>

搜索歷史是方法data里面的，并且能拿到本地的搜索歷史

// 歷史搜索,拿本地的key
historyList: uni.getStorageSync(key)

點(diǎn)擊熱門搜索，觸發(fā)clickHandler方法

clickHandler(item) {
				// 
				// #ifdef APP-PLUS
				// 獲取當(dāng)前頁面實(shí)例
				const currentWebview = this.$mp.page.$getAppWebview();
				currentWebview.setTitleNViewSearchInputText(item)
				// #endif
				// #ifdef H5
				// 清空選擇框內(nèi)容
				const placeholde = document.querySelector('.uni-page-head-search-placeholder')
				placeholde.innerHTML = ''
				const inputsearch = document.querySelector('.uni-input-input[type=search]')
				inputsearch.value = item
				// #endif
				//點(diǎn)擊之后向父組件傳入,通過key=ziChuanfu向父組件傳參，并調(diào)用父組件的方法
				this.$emit('ziChuanfu', {
					value: item
				})
			}

這個(gè)是uniapp官網(wǎng)實(shí)例，拿取到后可以改變pages.json里面的內(nèi)容,把點(diǎn)擊的值賦值給輸入框

const currentWebview = this.$mp.page.$getAppWebview();
currentWebview.setTitleNViewSearchInputText(item)

這個(gè)也是點(diǎn)擊的值賦值給H5的輸入框，通過Js拿取ID的方式賦值的

// #ifdef H5
				// 清空選擇框內(nèi)容
				const placeholde = document.querySelector('.uni-page-head-search-placeholder')
				placeholde.innerHTML = ''
				const inputsearch = document.querySelector('.uni-input-input[type=search]')
				inputsearch.value = item
				// #endif

將點(diǎn)擊的值傳遞給父組件

//點(diǎn)擊之后向父組件傳入,通過key=ziChuanfu向父組件傳參，并調(diào)用父組件的方法
				this.$emit('ziChuanfu', {
					value: item
				})

父組件通過@ziChuanfu來接收，并調(diào)用doSearch方法

<keyword @ziChuanfu='doSearch' v-if="searched"></keyword>

父組件中的methods的方法

methods: {
			doSearch(obj) {
				// obj && obj.value 是否是小程序傳遞的搜索關(guān)鍵字
				this.content = obj && obj.value ? obj.value : this.content
				console.log('dosearch的內(nèi)容', this.content)
				// uni.showLoading()
				// 小程序賦值的問題，
				// #ifdef MP
				this.$refs.searchBar.searchVal = this.content
				// #endif
				this.storageHistory()
				this.searched = false
			},
			storageHistory() {
				const key = 'history_key'
				// 獲取本地存在的記錄
				// 異步獲取數(shù)據(jù)
				uni.getStorage({
					key,
					success: (res) => {
						console.log("原歷史關(guān)鍵字", res.data)
						// 查詢原歷史關(guān)鍵字?jǐn)?shù)組，判斷數(shù)組中是否存在關(guān)鍵字
						//如果不存在則添加到數(shù)組第一個(gè)元素，存在則不添加
						// 邏輯結(jié)構(gòu)為content不為空，數(shù)組中不包含這個(gè)元素，則添加到第一個(gè)元素
						this.content && res.data.indexOf(this.content) < 0 && res.data.unshift(this.content)
						uni.setStorageSync(key, res.data)
					},
					fail: (err) => {
						// 第一個(gè)滿足則進(jìn)行&&后面的
						this.content && uni.setStorageSync(key, [this.content])
					}
				})
			}
		}
	}

這兩個(gè)方法是App中一個(gè)輸入顯示，一個(gè)確認(rèn)提交的方法，在APP中才能有效，且與method同級(jí)

// 監(jiān)聽原生標(biāo)題欄搜索輸入框輸入內(nèi)容變化事件
		onNavigationBarSearchInputChanged(e) {
			console.log("輸入的內(nèi)容", e.text)
			this.content = e.text
		},
		// 監(jiān)聽原生標(biāo)題欄搜索輸入框搜索事件，用戶點(diǎn)擊軟鍵盤上的“搜索”按鈕時(shí)觸發(fā)。
		onNavigationBarSearchInputConfirmed(e) {
			console.log("確認(rèn)的內(nèi)容", e.text)
			// #ifdef APP-PLUS
			currentWebview.setTitleNViewSearchInputFocus(false)
			// #endif
			this.doSearch()
		},

dosearch中的方法講解如果dosearch傳入有參數(shù)，就把參數(shù)賦值給content ，沒有則說明是App中輸入的參數(shù)，也就是吧值賦值給了

this.content = obj && obj.value ? obj.value : this.content
console.log('dosearch的內(nèi)容', this.content)

將content值賦值給小程序的輸入框

// #ifdef MP
	this.$refs.searchBar.searchVal = this.content
// #endif

storageHistory異步獲取數(shù)據(jù)，并存儲(chǔ)

storageHistory() {
				const key = 'history_key'
				// 獲取本地存在的記錄
				// 異步獲取數(shù)據(jù)
				uni.getStorage({
					key,
					success: (res) => {
						console.log("原歷史關(guān)鍵字", res.data)
						// 查詢原歷史關(guān)鍵字?jǐn)?shù)組，判斷數(shù)組中是否存在關(guān)鍵字
						//如果不存在則添加到數(shù)組第一個(gè)元素，存在則不添加
						// 邏輯結(jié)構(gòu)為content不為空，數(shù)組中不包含這個(gè)元素，則添加到第一個(gè)元素
						this.content && res.data.indexOf(this.content) < 0 && res.data.unshift(this.content)
						uni.setStorageSync(key, res.data)
					},
					fail: (err) => {
						// 第一個(gè)滿足則進(jìn)行&&后面的
						this.content && uni.setStorageSync(key, [this.content])
					}
				})
			}

到此這篇關(guān)于uniApp學(xué)習(xí)之熱門搜索，搜索數(shù)據(jù)頁面緩存實(shí)例的文章就介紹到這了,更多相關(guān)uniApp學(xué)習(xí)之熱門搜索，搜索數(shù)據(jù)頁面緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: