【uniapp 样式】使用setStorageSync存储历史搜索记录

news2024/11/25 10:31:23

在这里插入图片描述

<template>
	<view>
		<view class="zhuangbox u-flex">
			 <u--input
					placeholder="请输入关键字搜索"
					border="surround"
					shape='circle'
					prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399"
					v-model="inputVal"
					@confirm='searchFun'
				></u--input>
			<text class="u-m-l-30 u-color-8D4 u-f-s-26" @click="cancelFun">取消</text>
		</view>	
		<view class="search-keyword">
			<scroll-view class="keyword-box" scroll-y>
				<view class="keyword-block">
					<view class="u-flex u-row-between u-p-t-30 u-p-b-30 u-tips-color">
						<view class="title">历史搜索</view>
						<view @tap="oldDelete">
							<image src="@/static/img/shanchu.png" mode="" class="u-w-40 u-h-40"></image>
						</view>
					</view>
					<view class="u-flex u-flex-wrap">
						<view class="u-m-r-15 u-m-b-15" v-for="(keyword, index) in list" @tap="doSearch(keyword)" :key="index">
							
							<view class="neirong">{{keyword}}</view>
						</view>
					</view>
				</view>
		
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputVal:'',
				list:[],
			}
		},
		onShow() {
			this.inputVal = '';
			this.getSearchStorage();
		},
		methods: {
			searchFun(){
				if(!this.inputVal.trim()){
					this.$u.toast('请输入关键词')
					return;
				}
				this.setSearchStorage(this.inputVal);
				this.gopage('/pagesA/index/list?keyword='+ this.inputVal);
			},
			// 取消
			cancelFun(){
				this.inputVal = '';
			},
			doSearch(value) {
				if(!value.trim()){
					this.$u.toast('请输入关键词')
					return;
				}
				this.active = true;
				this.inputVal = value;
				this.gopage('/pagesA/index/list?keyword='+value)
			},		
			// 删除历史搜索数据
			oldDelete(){
				uni.setStorageSync('search_key','');
				this.list = [];
			},
			// 本地缓存 搜索历史
			setSearchStorage(searchkey) {
				// 存一个数组类型
				// 先取出本地缓存的数据
				let searchArr=uni.getStorageSync('search_key')||[]
				// 从前面插入
				searchArr.unshift(searchkey)
						
				uni.setStorageSync('search_key',searchArr)
			},
			// 取出本地缓存数据并显示,不会自动执行,放到生命周期函数中
			getSearchStorage() {
				let getData = uni.getStorageSync('search_key')
				// 数组去重
				let setData = [...new Set(getData)]
				this.list = setData;
			},
			gopage(url) {
				uni.navigateTo({
					url:url
				})
			},
		}
	}
</script>
<style lang="scss">
	.zhuangbox{
		background: #FFFFFF;
		padding: 0 32rpx;
		.u-input{
			padding-left: 30rpx !important;
			background-color:$uni-bg-color-grey;
		}
		.u-input.u-border{
			border-color: transparent !important;
		}
	}
</style>
<style lang="scss" scoped>
.search-keyword{
	padding:0 30rpx 30rpx;
	.keyword-block{
		padding-bottom: 30rpx;
	}
}
.zanwu{
	margin: 0 auto;
}
.title{
	font-size: 28rpx;
	font-weight: 500;
	color: #181818;
}
.neirong{
	background: #F5F5F5;
	border-radius: 28rpx;
	padding: 10rpx 34rpx;
	font-size: 26rpx;
	color: #181818;
}
.u-flex{
	display: flex;
	align-items: center;
}
.wrap,.u-flex-wrap{
	flex-wrap: wrap;
}
.flex_jus_between,.u-row-between{
	justify-content:space-between;
}
.u-m-l-30{
	margin-left:30rpx;
}
.u-m-r-15{
	margin-right:15rpx;
}
.u-m-b-15{
	margin-bottom:15rpx;
}
.u-p-t-30{
	padding-top:30rpx;
}
.u-p-b-30{
	padding-bottom:30rpx;
}
.u-w-40{
	width:40rpx;
}
. u-h-40 {
	height:40rpx;
}


</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/824479.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vSphere ESXI 7.0 网络规划

ESXi 网络 业务网络、Vmotion&#xff08;漂移&#xff09;、管理网络、存储网络 ESXi 管理网络 vCenter Server 管理网络 vCenter Server SSO域名 Single Sign-on域名&#xff1a;在没有指定的情况下&#xff0c;默认填写 vsphere.local VMware vSphere整体解决方案和网络…

uniapp点击图片放大预览

阐述 有些时候我们在用uniapp显示图片时&#xff0c;有的不宜全部显示到屏幕上&#xff0c;uniapp提供了一个非常好用的api。 实现方式如下&#xff1a; <template><view class"content"><image class"logo" src"/static/images/a.…

Nacos 持久化实例 删不掉问题( Please unregister instance first )

文章目录 一、报错现象&#xff1a;二、问题解决过程&#xff1a;三、最终解决方案&#xff1a;四、注销实例API&#xff1a; &#x1f50e;请直接看第三部分&#x1f50e; 一、报错现象&#xff1a; 二、问题解决过程&#xff1a; 尝试将服务下线&#xff1a; 再次点击删除按…

如何在水务行业运用IPD?

水务行业&#xff0c;包括自来水的生产和供应、水务及其再生利用和其他水的处理、利用与分配。水务行业主要环节分布包括原水生产与供应、自来水生产和供应、污水收集、水务、中水与再生水利用等。 我国水务行业的产业链包括上游、中游、下游。上游包括科研和规划设计、设备及材…

英雄的力量【力扣2681】

1、解题思路 将数组按从大到小的顺序排列&#xff0c;i<j&#xff0c;那么以nums[i]开始&#xff0c;nums[j]结尾&#xff0c;i----j中的任意数&#xff0c;组成的排列&#xff0c;其英雄力量都是nums[i]*nums[i]*nums[j]&#xff1b; 若ij&#xff0c;则只有一种排列组合…

SOC FPGA之流水灯设计

一、DS-5简介 Altera Soc EDS开发套件的核心是Altera版ARM Development Studio 5(DS-5)工具包&#xff0c;为SoC器件提供了完整的嵌入式开发环境、FPGA自适应调试和对Altera工具的兼容。 1.1 DS-5 eclipse破解 首先下载破解器 然后进入cmd运行&#xff0c;进入到破解器所在文…

AndroidBanner - ViewPager

解决banner 不可见依旧轮播的问题 思考一下&#xff1a;什么时候可以轮播&#xff0c;什么时候不可以轮播 当Banner添加到屏幕上&#xff0c;且对用户可见的时候&#xff0c;可以开始轮播 当Banner从屏幕上移除&#xff0c;或者Banner不可见的时候&#xff0c;可以停止轮播 当…

排序进行曲-v2.0

小程一言 这篇文章是在排序进行曲1.0之后的续讲&#xff0c; 0之后的续讲,英语在上一篇讲的排序的基本概念与分类0之后的续讲, 英语在上一篇讲的排序的基本概念与分类这片主要是对0之后的续讲,英语在上一篇讲的排序的基本概念与分类这 篇主要是对几个简单的排序进行细致的分析…

Mr. Cappuccino的第55杯咖啡——Mybatis一级缓存二级缓存

Mybatis一级缓存&二级缓存 概述一级缓存特点演示前准备效果演示在同一个SqlSession中在不同的SqlSession中 源代码怎么禁止使用一级缓存一级缓存在什么情况下会被清除 二级缓存特点演示前准备效果演示在不同的SqlSession中 源代码怎么关闭二级缓存 一级缓存&#xff08;Spr…

【css】css调整文本间距

text-indent 属性用于指定文本第一行的缩进letter-spacing 属性用于指定文本中字符之间的间距line-height 属性用于指定行之间的间距&#xff1a;word-spacing 属性用于指定文本中单词之间的间距&#xff0c;这个和letter-spacing类似white-space 属性指定元素内部空白的处理方…

Java面向对象之方法的使用

文章目录 一、什么是方法二、方法的声明格式三、方法的分类四、方法的调用五、方法的注意点六、方法的重载七、可变形参的方法八、方法参数的值传递机制九、递归方法 一、什么是方法 方法(method)是类或对象行为特征的抽象&#xff0c;用来完成某个功能操作。在某些语言中也称…

JavaScript将CSV文件转为JSON

说在前面 相信平时大家或多或少都会有遇到过类似的情况&#xff1a; &#x1f64e;&#xff08;需求小姐姐&#xff09; &#x1f64e;‍♂&#xff08;我&#xff09; &#x1f64e;&#xff1a;这里我们需要做一个省市联动下拉框&#xff0c;你看看可以做吗&#xff1f; &am…

基于SSM 应急指挥平台-计算机毕设 附源码 13263

SSM应急指挥平台 摘 要 科技进步的飞速发展引起人们日常生活的巨大变化&#xff0c;电子信息技术的飞速发展使得电子信息技术的各个领域的应用水平得到普及和应用。信息时代的到来已成为不可阻挡的时尚潮流&#xff0c;人类发展的历史正进入一个新时代。在现实运用中&#xff0…

DFS之连通性--迷宫

思路&#xff1a;就是通过dfs进行搜索&#xff0c;看是否能从给定的起点到给定的终点&#xff0c;当然也可以用bfs写&#xff0c;这里用到dfs写的 #include<bits/stdc.h> using namespace std; int n; char g[1010][1010]; int ax,ay,bx,by; int dx[4]{1,0,-1,0}; int dy…

pgSql 报错:timestamp without time zone >= character varying

在这里补充一点&#xff0c;数据库映射实体类不要使用LocalDateTime,驱动版本大概率不支持&#xff0c;出现奇奇怪怪的错&#xff1b; 在mysql 使用时&#xff0c;String 类型会隐式转成Date类型&#xff0c;使用mybatis-plus拼接就不会报错&#xff0c;换成pgSql就出现这个错…

模板方法模式:优化代码复用与扩展性的设计模式

模板方法模式&#xff1a;优化代码复用与扩展性的设计模式 什么是模板方法模式&#xff1f; 模板方法模式是一种行为型设计模式&#xff0c;它定义了一个算法的骨架&#xff0c;将一些步骤的具体实现延迟到子类中。模板方法模式通过将算法的通用部分抽象出来&#xff0c;以模板…

华为OD机试真题 Java 实现【最小传输时延Ⅱ】【2023 B卷 200分】,附详细解题思路

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…

计算一组数据的方差statistics.pvariance()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算一组数据的方差 statistics.pvariance() 选择题 下列说法错误的是? import statistics data [1, 2] print("【显示】data ", data) print(【执行】statistics.pvariance(data…

个人中心 - 实现修改用户头像、用户名或密码

目录 1. 修改用户头像 1.1 获取原来的用户头像和用户名 1.2 实现保存头像 2. 修改用户名或密码 1. 修改用户头像 本文是针对之前的一篇项目博客 - 博客系统 做的一个扩展功能. 1.1 获取原来的用户头像和用户名 想要修改头像, 那么就得先获取数据库中原来的头像, 此处顺便…

从零开始 Spring Cloud 8:Docker

从零开始 Spring Cloud 8&#xff1a;Docker 图源&#xff1a;laiketui.com Docker 可以帮助我们更方便地部署 Spring Cloud 应用。 环境准备 准备 Docker 环境可以参考 这篇文章。 操作镜像 docker 的镜像相关操作主要涉及以下命令&#xff1a; docker pull&#xff0c;…