uni-app 搜索、历史记录功能简单实现
实现功能
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 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>{{ item }}</text>
</view>
</view>
</view>
<!-- 搜索历史 -->
</view>
</template>
<script>
export default {
data() {
return {
inputValue: '',
searchHistoryList: [] //搜索出来的内容
};
},
methods: {
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>
.search {
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0px 15px;
}
.searchInput {
background-color: #f8f9fa;
width: 220px;
margin-left: 5px;
}
.searchHistory {
width: 100%;
margin-top: 5px;
}
.searchHistoryItem {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.searchHistoryItem view {
/* width: 50px; */
height: 20px;
border: 1px solid #eee;
margin: 0px 5px;
}
</style>
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 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>{{ item }}</text>
</view>
</view>
</view>
<!-- 搜索历史 -->
</view>
</template>
<script>
export default {
data() {
return {
inputValue: '',
searchHistoryList: [] //搜索出来的内容
};
},
methods: {
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>
.search {
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0px 15px;
}
.searchInput {
background-color: #f8f9fa;
width: 220px;
margin-left: 5px;
}
.searchHistory {
width: 100%;
margin-top: 5px;
}
.searchHistoryItem {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.searchHistoryItem view {
/* width: 50px; */
height: 20px;
border: 1px solid #eee;
margin: 0px 5px;
}
</style>
- 相关阅读
- 文本框输入限制
- 超级实用且不花哨的js代码大全( 2 )
- js指定日期加n天加n月加n年
- Web标准中XHTML的代码规范
- 旅行社手机网站模板10
- javascript正则的用法与示例
- div中设置文字垂直居中
- 深圳市假日通国际旅行社有限公司
- 共有0条关于《uni-app 搜索、历史记录功能简单实现》的评论
- 发表评论
正在加载评论......
返回顶部发表评论
网友评论声明,请自觉遵守互联网相关政策法规。
您发布的评论即表示同意遵守以下条款:
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家、社会、集体和公民的合法权益;
二、不得发布国家法律、法规明令禁止的内容;互相尊重,对自己在本站的言论和行为负责;
三、本站对您所发布内容拥有处置权。
- 更多>>同类信息
- uni-app开发表单input组件的一些规则说明自己预留使用
- uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机
- 小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像
- 微信小程序打开客服提示:该小程序提供的服务出现故障,请稍后重试
- 微信小程序客服会话只能过button让用户主动触发
- uni-app开发微信小程序使用button的open-type为contact调用微信客服不能用view或者js调用