JavaScript

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > uniApp学习之热门搜索，搜索数据页面缓存

uniApp学习之热门搜索，搜索数据页面缓存实例

投稿：wdc

这篇文章主要介绍了uniApp学习之热门搜索,搜索数据页面缓存实例,需要的朋友可以参考下

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'], //热门搜索数据接口
				// 历史搜索,拿本地的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
				// 清空选择框内容
				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向父组件传参，并调用父组件的方法
				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 数组进行遍历

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

hostList 数组如下

hostList: ['java', 'python', 'springBoot', 'SpringCloud'], //热门搜索数据接口

对搜索历史进行遍历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)

点击热门搜索，触发clickHandler方法

clickHandler(item) {
				// 
				// #ifdef APP-PLUS
				// 获取当前页面实例
				const currentWebview = this.$mp.page.$getAppWebview();
				currentWebview.setTitleNViewSearchInputText(item)
				// #endif
				// #ifdef H5
				// 清空选择框内容
				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向父组件传参，并调用父组件的方法
				this.$emit('ziChuanfu', {
					value: item
				})
			}

这个是uniapp官网实例，拿取到后可以改变pages.json里面的内容,把点击的值赋值给输入框

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

这个也是点击的值赋值给H5的输入框，通过Js拿取ID的方式赋值的

// #ifdef H5
				// 清空选择框内容
				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向父组件传参，并调用父组件的方法
				this.$emit('ziChuanfu', {
					value: item
				})

父组件通过@ziChuanfu来接收，并调用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的内容', this.content)
				// uni.showLoading()
				// 小程序赋值的问题，
				// #ifdef MP
				this.$refs.searchBar.searchVal = this.content
				// #endif
				this.storageHistory()
				this.searched = false
			},
			storageHistory() {
				const key = 'history_key'
				// 获取本地存在的记录
				// 异步获取数据
				uni.getStorage({
					key,
					success: (res) => {
						console.log("原历史关键字", res.data)
						// 查询原历史关键字数组，判断数组中是否存在关键字
						//如果不存在则添加到数组第一个元素，存在则不添加
						// 逻辑结构为content不为空，数组中不包含这个元素，则添加到第一个元素
						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同级

// 监听原生标题栏搜索输入框输入内容变化事件
		onNavigationBarSearchInputChanged(e) {
			console.log("输入的内容", e.text)
			this.content = e.text
		},
		// 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
		onNavigationBarSearchInputConfirmed(e) {
			console.log("确认的内容", e.text)
			// #ifdef APP-PLUS
			currentWebview.setTitleNViewSearchInputFocus(false)
			// #endif
			this.doSearch()
		},

dosearch中的方法讲解如果dosearch传入有参数，就把参数赋值给content ，没有则说明是App中输入的参数，也就是吧值赋值给了

this.content = obj && obj.value ? obj.value : this.content
console.log('dosearch的内容', this.content)

将content值赋值给小程序的输入框

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

storageHistory异步获取数据，并存储

storageHistory() {
				const key = 'history_key'
				// 获取本地存在的记录
				// 异步获取数据
				uni.getStorage({
					key,
					success: (res) => {
						console.log("原历史关键字", res.data)
						// 查询原历史关键字数组，判断数组中是否存在关键字
						//如果不存在则添加到数组第一个元素，存在则不添加
						// 逻辑结构为content不为空，数组中不包含这个元素，则添加到第一个元素
						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学习之热门搜索，搜索数据页面缓存实例的文章就介绍到这了,更多相关uniApp学习之热门搜索，搜索数据页面缓存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文