直接上代码
html部分:
搜索框部分
<view class="u1">
<view class="sousuo">
<input type="text" value="" placeholder="请输入关键字搜索" focus="true" v-model="text" @confirm="searchText($event)" />
<image src="../../static/image/sou2.png" mode="" type="search" @tap="searchNow($event)"></image>
</view>
<view class="cancel" @click="before">取消</view>
</view>
搜索历史展示部分
<view class="searchBotBox">
<view class="ov">
<view class="shan">
<view class="fl">历史搜索</view>
<!-- <image src="../../static/shan.png" mode=""></image> -->
</view>
<view @tap="clearHistory" class="fr grace-more-r grace-search-remove">
<image src="../../static/image/shan.png" mode=""></image>
</view>
</view>
<view class="searchHistoryBox">
<view class="searchHistoryBoxItem" v-for="(item,index) in searchKey" :key='index' @click="goSearch(item)">
{{item}}
</view>
</view>
</view>
js部分
在每次进入页面的时候取出本地缓存
uni.getStorage({
key: 'searchLocal',
success: (res) => {
if(res.data != ''){
console.log(JSON.parse(res.data))
//把字符串转换为对象
this.searchKey = JSON.parse(res.data)
}
},
fail: (err) => {
console.log(err);
}
})
点击搜索的方法
searchNow(e,val) {
//val = this.text.trim()//清除空格
//清除搜索字的显示隐藏
this.jiaodian = false;
if (this.text== '') {
uni.showToast({
title: '未输入搜索关键字',
icon: 'none',
duration: 1000
});
return false;
}
var that = this;
var newArr = that.searchKey;
//如果有搜索相同的话,先删除,再添加新的
if (this.searchKey.indexOf(this.text) == -1) {
newArr.unshift(this.text);
}
//超过11个就删除最后一个,保留11个
if (newArr.length >= 11) {
newArr.pop()
}
newArr = JSON.stringify(newArr); //转换成json格式的数据
uni.setStorage({//将搜索的值添加到本地缓存
key: 'searchLocal',
data: newArr
});
//请求搜索接口
var serverUrl = that.serverUrl
uni.request({
url: serverUrl + '/search',
method: "POST",
data: {
key_word: that.text,
uid: that.uid
},
success: (res) => {
console.log(res.data.data)
this.text = ''
}
})
//点击直接去搜索
this.goSearch(this.text);
},
点击搜索历史出发的方法
goSearch(e) {
this.text= "";
// uni.navigateTo({
// // url: 'sousuo2?goods_name=' + e
// })
}
删除搜索历史的方法
clearHistory() {
var that = this;
var serverUrl = that.serverUrl;
uni.showModal({
title: '提示',
content: '点击确定将删除所有历史信息,确定删除吗?',
success: function(res) {//点击确定删除搜索历史
uni.request({
url: serverUrl + '/del_history',
method: "POST",
success: () => {
that.searchKey = [];
uni.setStorage({
key: 'searchLocal',
data: that.searchKey
});
}
})
}
});
},
用到的主要是uni.getStorage和uni.setStorage
用到的数组api
split(’ , '):将字符串按照需要分割成数组,且返回该数组
indexOf( ’ n ’ ):查找元素,未找到返回-1
unshift( ’ n ’ ):添加一个元素n至数组的最前面,并返回数组的长度,改变原数组
pop():删除数组的最后一个元素,并且改变原数组
css部分
.content {
background-color: #FFFFFF;
}
.u1 {
display: flex;
justify-content: space-between;
align-items: center;
padding: 120rpx 30rpx 15rpx 30rpx;
.sousuo {
display: flex;
position: relative;
width: 572rpx;
height: 56rpx;
align-items: center;
background-color: #ccc;
border-radius: 20rpx;
input {
font-size: 24upx;
width: 515upx;
text-indent: 1rem;
line-height: 56rpx;
padding-left: 8rpx;
}
image {
width: 35upx;
height: 35upx;
position: absolute;
right: 30upx;
z-index: 3;
}
}
.cancel {
height: 26rpx;
font-size: 28rpx;
}
}
page {
background: #FFF;
}
.ov {
display: flex;
justify-content: space-between;
overflow: hidden;
}
.fl {
float: left;
font-family: PingFang-SC-Medium;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 20px;
letter-spacing: 0px;
color: #666666;
}
.shan {
display: flex;
justify-content: space-between;
}
.shan image {
width: 25rpx;
height: 29rpx;
border: 1px solid red;
}
.fr {
float: right;
}
.fr image {
width: 35upx;
height: 37upx;
}
.searchTopBox {
width: 100%;
background-color: #0b877f;
height: 100upx;
box-sizing: border-box;
padding-top: 15upx;
}
.searchBoxRadius {
width: 90%;
height: 70upx;
background-color: #fff;
margin-left: 5%;
overflow: hidden;
border-radius: 35upx;
}
.searchBoxIcon {
font-size: 40upx;
margin-top: 20upx;
margin-left: 20upx;
float: left;
}
.searchBoxIpt {
height: 70upx;
line-height: 70upx;
margin-left: 20upx;
float: left;
}
.searchBotBox {
width: 100%;
margin-top: 30upx;
padding: 15upx 3%;
box-sizing: border-box;
}
.searchHistoryBox {
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.searchHistoryBoxItem {
float: left;
line-height: 23rpx;
padding: 20rpx;
margin: 0rpx 30rpx 15rpx 0;
text-align: center;
height: 23rpx;
font-size: 24rpx;
font-weight: bold;
color: rgba(255, 255, 255, 1);
background: rgba(228, 205, 162, 1);
border-radius: 16rpx;
}