uniApp學習之熱門搜索，搜索數(shù)據(jù)頁面緩存實例
更新時間：2023年10月02日 15:20:30 投稿：wdc
這篇文章主要介紹了uniApp學習之熱門搜索,搜索數(shù)據(jù)頁面緩存實例,需要的朋友可以參考下
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
// 獲取當前頁面實例
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
//點擊之后向父組件傳入,通過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布局自動換行
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; //超出部分省略號顯示
}
}
}
</style>對data中配置的 hostList 數(shù)組進行遍歷
<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ù)接口
對搜索歷史進行遍歷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)
點擊熱門搜索，觸發(fā)clickHandler方法
clickHandler(item) {
//
// #ifdef APP-PLUS
// 獲取當前頁面實例
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
//點擊之后向父組件傳入,通過key=ziChuanfu向父組件傳參，并調(diào)用父組件的方法
this.$emit('ziChuanfu', {
value: item
})
}這個是uniapp官網(wǎng)實例，拿取到后可以改變pages.json里面的內(nèi)容,把點擊的值賦值給輸入框
const currentWebview = this.$mp.page.$getAppWebview(); currentWebview.setTitleNViewSearchInputText(item)
這個也是點擊的值賦值給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將點擊的值傳遞給父組件
//點擊之后向父組件傳入,通過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 是否是小程序傳遞的搜索關鍵字
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("原歷史關鍵字", res.data)
// 查詢原歷史關鍵字數(shù)組，判斷數(shù)組中是否存在關鍵字
//如果不存在則添加到數(shù)組第一個元素，存在則不添加
// 邏輯結構為content不為空，數(shù)組中不包含這個元素，則添加到第一個元素
this.content && res.data.indexOf(this.content) < 0 && res.data.unshift(this.content)
uni.setStorageSync(key, res.data)
},
fail: (err) => {
// 第一個滿足則進行&&后面的
this.content && uni.setStorageSync(key, [this.content])
}
})
}
}
}這兩個方法是App中一個輸入顯示，一個確認提交的方法，在APP中才能有效，且與method同級
// 監(jiān)聽原生標題欄搜索輸入框輸入內(nèi)容變化事件
onNavigationBarSearchInputChanged(e) {
console.log("輸入的內(nèi)容", e.text)
this.content = e.text
},
// 監(jiān)聽原生標題欄搜索輸入框搜索事件，用戶點擊軟鍵盤上的“搜索”按鈕時觸發(fā)。
onNavigationBarSearchInputConfirmed(e) {
console.log("確認的內(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ù)，并存儲
storageHistory() {
const key = 'history_key'
// 獲取本地存在的記錄
// 異步獲取數(shù)據(jù)
uni.getStorage({
key,
success: (res) => {
console.log("原歷史關鍵字", res.data)
// 查詢原歷史關鍵字數(shù)組，判斷數(shù)組中是否存在關鍵字
//如果不存在則添加到數(shù)組第一個元素，存在則不添加
// 邏輯結構為content不為空，數(shù)組中不包含這個元素，則添加到第一個元素
this.content && res.data.indexOf(this.content) < 0 && res.data.unshift(this.content)
uni.setStorageSync(key, res.data)
},
fail: (err) => {
// 第一個滿足則進行&&后面的
this.content && uni.setStorageSync(key, [this.content])
}
})
}到此這篇關于uniApp學習之熱門搜索，搜索數(shù)據(jù)頁面緩存實例的文章就介紹到這了,更多相關uniApp學習之熱門搜索，搜索數(shù)據(jù)頁面緩存內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了微信小程序 網(wǎng)絡API 上傳、下載詳解的相關資料,需要的朋友可以參考下2016-11-11
這篇文章主要為大家介紹了類和原型的設計模式之復制與委托差異詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了微信小程序 PHP后端form表單提交實例詳解的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家介紹了無感知刷新Token及認證原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了微信小程序本地緩存數(shù)據(jù)增刪改查實例詳解的相關資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了手把手教你從0搭建前端腳手架詳解,腳手架就是在啟動的時候詢問一些簡單的問題，并且通過用戶回答的結果去渲染對應的模板文件,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了關于前端JavaScript中的ES6，ES6是一個泛指，含義是 5.1 版以后的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、ES2017語法標準，ES6新特性目前只有在一些較新版本瀏覽器得到支持，老版本瀏覽器里面運行我們需要將ES6轉換為ES52021-10-10
這篇文章主要介紹了微信小程序 Page（）函數(shù)詳解的相關資料,在開發(fā)過程中肯定會遇到Page（）函數(shù)，希望能幫助到大家，需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了JavaScript?鍵盤事件的處理及屬性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了Java開發(fā) 富文本編輯器TinyMCE詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07