实现功能
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>