uni-app 搜索、历史记录功能简单实现

前端烂笔头

于 2020-10-14 17:03:26 发布

阅读量8.3k

点赞数 17

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45846359/article/details/109078507

版权

该博客介绍了如何在uni-app中实现搜索功能并保存历史记录，包括点击搜索时将值存入本地、重复搜索时更新历史记录以及清空历史记录的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现功能

1.点击搜索，把搜索的值存入本地记录，并展示
2.搜索相同的值，要删除旧数据，把新数据放进数组首位
3.清空历史记录

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

		<!-- 搜索历史 -->
		<view class="searchHistory">
			<view

最低0.47元/天解锁文章