uni-app搜索-历史记录

Posted 2022-03-25 老张在线敲代码

效果图

<template>
	<view>
		<!-- 搜索框 -->
		<view class="search">
			<view style="display: flex;align-items: center;">
				 <!-- @confirm="search" 点击 -->
				<input class="searchInput" v-model="inputValue" @confirm="search" placeholder="搜索" type="text" />
			</view>
			<view>取消</view>
		</view>
		<!-- 搜索框 -->

		<!-- 搜索历史 -->
		<view class="searchHistory">
			<view style="display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;padding: 0px 5px;">
				<view>搜索历史:</view>

				<view style="color: red;font-size: 28px;" @click="empty">×</view>
			</view>
			<view class="searchHistoryItem">
				<view v-for="(item, index) in searchHistoryList" :key="index">
					<text @click="model(item,index)"> item </text>
					<text @click="del(item,index)" style="color: red;" >&nbsp; x</text>
				</view>
			</view>
		</view>
		<!-- 搜索历史 -->
	</view>
</template>

<script>
export default 
	data() 
		return 
			inputValue: '',
			searchHistoryList: [] //搜索出来的内容
		;
	,
	methods: 
		model(item,index)
			this.inputValue = item
		,
		del(item,index)
			this.searchHistoryList.splice(0,1)
		,
		search() 
			if (this.inputValue == '') 
				uni.showModal(
					title: '搜索内容不能为空'
				);
			 else 
				if (!this.searchHistoryList.includes(this.inputValue)) 
					this.searchHistoryList.unshift(this.inputValue);
					uni.setStorage(
						key: 'searchList',
						data: JSON.stringify(this.searchHistoryList)
					);
				 else 
					//有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
					let i = this.searchHistoryList.indexOf(this.inputValue);
					this.searchHistoryList.splice(i, 1);
					this.searchHistoryList.unshift(this.inputValue);
					uni.showToast(
						title: '不能重复添加'
					);
					uni.setStorage(
						key: 'searchList',
						data: JSON.stringify(this.searchHistoryList)
					);
				
			
		,
		//清空历史记录
		empty() 
			uni.showToast(
				title: '已清空'
			);
			uni.removeStorage(
				key: 'searchList'
			);

			this.searchHistoryList = [];
		
	,
	async onLoad() 
		let list = await uni.getStorage(
			key: 'searchList'
		);

		console.log(list[1].data);

		if (list[1].data) 
			this.searchHistoryList = JSON.parse(list[1].data);
		
	
;
</script>

<style lang='scss'>
	@import "search.scss";
</style>

.search 
	width: 100%;
	height: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 2rpx 6rpx;
	margin-top: 20rpx;
	.searchInput 
		background-color: #f8f9fa;
		width: 220rpx;
		margin-left: 5rpx;
	


.searchHistory 
	width: 100%;
	margin-top: 16rpx;
	.searchHistoryItem 
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		view 
			/* width: 50px; */
			height: 20rpx;
			background: #f0f0f0;
			padding: 4rpx;
			margin: 6rpx 5rpx;
		
	

	.main_classify
		background: white;
		.main_under_classify
			.li
				height: 124rpx;
				border-bottom: 2rpx #999999 solid;
				padding: 20rpx 28rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				image
					width: 116rpx;
					height: 110rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					margin-top: 6rpx;
				
				.li_content
					width: 254rpx;
					.title
						display: block;
						font-weight: 800;
						font-size: 28rpx;
					
					text
						line-height: 40rpx;
					
					.zhiwei
						color: #666666;
					
					.heng
						color: #999999;
					
				
				.li_end
					padding: 0rpx 40rpx;
					width: 140rpx;
					height: 52rpx;
					border: 1rpx solid red;
					border-radius: 50rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 36rpx;
					.jia
						width: 24rpx;
						height: 24rpx;
						margin-top: 16rpx;
					
					.erji
						width: 42rpx;
						height: 42rpx;