uniapp实现搜索历史功能

最新推荐文章于 2023-11-24 20:05:13 发布

哼唧怪的嘤嘤怪

最新推荐文章于 2023-11-24 20:05:13 发布

阅读量1.3k

点赞数 1

分类专栏： uniapp 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_41623830/article/details/125498051

版权

uniapp 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<input type="text" confirm-type="search" @confirm="search_btn" v-model.trim ='search_text'/>
//confirm-type="search" @confirm="search_btn"  设置软键盘右下角为搜索   然后点击就搜索

<text class="iconfont" @tap="delete_history()">删除</text>  //删除

return{  //定义两个这个
	search_text:'', //搜索的内容
	search_lishi:[], //历史的列表
}
onShow(){  //这里一进来就查询之前留下的搜索内容  别忘了退出登录的时候删掉
	console.log(uni.getStorageSync('history'))
	if(uni.getStorageSync('history') != ""){
		this.search_lishi = uni.getStorageSync('history') //存放历史记录的数组
	}
},


search_btn(){ //点击回车 搜索
	//console.log('-----------'+this.search_text)
	this.add_history(this.search_text)
},
add_history(e){  //添加新的历史记录 当有搜索新的历史记录时就会进入这个方法
	//存在，flag1==0
	try{
		let flag1= this.search_lishi.findIndex(item => item=== e) //判断数组里面有没有重复查询过的内容
		if(flag1 != -1){  //有重复内容
			if(flag1 != 0){ //如果删除0会出错
				this.search_lishi.splice(flag1,1) //删除重复重新添加一个
				this.search_lishi.unshift(e)  //添加一个内容
			}
		}else{
            if(this.search_lishi.length >= 16){
				this.search_lishi.splice(15,1)  //删除最后一个新添加一个
				this.search_lishi.unshift(e)  //添加一个内容
			}else{
				this.search_lishi.unshift(e)  //添加一个内容
			}
		}
		uni.setStorageSync('history', this.search_lishi);//保存用户搜索历史
		this.search_lishi = uni.getStorageSync('history') //存放历史记录的数组
	}catch(e){
		this.search_lishi.push(e)  //添加一个内容
		//TODO handle the exception
	}
},
delete_history(){  //删除历史记录
	this.$refs.alertDialog.open()
},
dialogConfirm(){  //点击确定
	uni.removeStorageSync('history');//删除用户搜索历史
	this.search_lishi = uni.getStorageSync('history') //存放历史记录的数组
},