需求
完成一次搜索记录一次搜索，以后进入搜索页面会显示搜索历史，点击删除小图标会清空所有缓存
分割功能需求
主要分割为这几个步骤：
- 进入搜索后判断缓存中是否有值，如果没有缓存，隐藏历史记录跟小图标，如果有缓存，加载缓存，将缓存的内容加载进预先制作的显示容器中，并且在上方显示历史记录跟小图标；
- 输入值后，点击完成，判断是否有搜索结果，如果有，保存搜索记录，放进缓存，并且显示搜索结果，此时需要隐藏历史记录的container,隐藏完成按钮，上方的搜索框的长度变长，显示结果的container,并且input框中的值为不变，保存在input框中，没有就返回空
- 删除缓存
第一步
实现：
onLoad: function (options) {
const inputValue = options.inputValue;
if (wx.getStorageSync(’searchData’) == ’’) {
this.setData({
isHide: true,
isCover: true,
})
} else {
this.setData({
inputValue: inputValue,
confirm: ’完成’,
sercherStorage: wx.getStorageSync(’searchData’) || [],
isHide: false,
isShow: true
})
}
},
效果：
第二步
实现：
changeValue(e) {
let inputValue = e.detail.value;
if (inputValue == ’’) {
this.setData({
confirm: ’取消’,
isConfirm: false,
isHide:false, //显示历史记录container
width: ’85%’,
isShow: true, //显示图标以及标签栏
isCover:true //隐藏搜索结果的container
})
} else {
this.setData({
confirm: ’完成’,
inputValue: inputValue
})
}
},//监听输入
confirmValue(e) {
let value = this.data.inputValue;//获取输入值
if (this.data.confirm === ’完成’) {
let result = [];
for (let i in jobList) {
if (jobList[i].jobName.indexOf(value) >= 0){
result.push(jobList[i]);
this.setData({
result
})
}
if(this.data.result.length == 0) {
wx.showToast({
title: ’未找到数据’,
});
this.setData({
isConfirm: false,
isHide: false
})
}
}//搜索数据匹配
// 第二种搜索方法 正则匹配
// let result=[];
// let reg=new RegExp(value);
// for(var i=0;i<jobList.length;i++){
// if(jobList[i].jobName.match(reg)){
// result.push(jobList[i]);
// this.setData({
// result
// })
// }
// }
let searchData = this.data.sercherStorage;
searchData.push({
id: searchData.length,
name: value
})
wx.setStorageSync(’searchData’, searchData); //设置缓存
this.setData({
isConfirm: true, //隐藏搜索按钮
width: ’95%’,
inputValue: value,
isHide: true, //隐藏历史记录container
isShow: false, //隐藏图标以及标签栏
isCover: false //显示搜索结果
})
} else {
wx.navigateBack({
delta: 1, // 回退前 delta(默认为1) 页面
})
}//点击取消回到上个页面
},
效果：
第三步
clearStorage(e) {
wx.clearStorageSync(’searchData’);//清除缓存
wx.showModal({
title: ’提示’,
content: ’确定删除全部历史记录？’,
success: (res) => {
if (res.confirm) {
this.setData({
sercherStorage: [],
isShow: false
})
} else if (res.cancel) {
return false;
}
}
})
},
完整代码
wxml:
<import src="../../templates/template" />
<view class="searchContainer">
<view class="search" style="width:{{width}};">
<image class="searchImg" src="../../youzan-image/search.png"></image>
<input class="searchInput" value="{{inputValue}}" auto-focus bindinput="changeValue" />
</view><import src="../../templates/template" />
<view class="cancleSearch {{isConfirm?’hide’:’’}}" bindtap="confirmValue">{{confirm}}</view>
<view class="history {{isHide?’hide’:’’}}">
<view class="history-header {{isShow?’’:’hide’}}">
<view class="title">历史搜索</view>
<image class="delectHistory" src="../../youzan-image/delete.png" bindtap="clearStorage"></image>
</view>
<view class="history-content">
<view wx:for="{{sercherStorage}}" wx:key="item.id">
<view class="content">{{item.name}}</view>
</view>
</view>
</view>
<view class="result {{isCover?’hide’:’’}}">
<view wx:for="{{result}}" wx:key="index" data-index="{{index}}">
<template is="list-item" data="{{...item}}" />
</view>
<!-- <view class="a">test</view> -->
</view>
</view>
wxss:
page {
margin: 0;
padding: 0;
}
.searchContainer {
position: relative;
width: 100%;
height: 100rpx;
border-bottom: 8rpx solid #fbfbfb;
margin-left: 20rpx;
}
.search {
position: relative;
margin-top: 20rpx;
width: 85%;
height: 60rpx;
border: 3rpx solid #e8e8e8;
border-radius: 80rpx 80rpx 80rpx 80rpx;
float: left;
}
.searchInput {
position: absolute;
left: 65rpx;
top: 5rpx;
font-size: 15px;
color: #323230;
}
.searchImg {
position: absolute;
left: 26rpx;
top: 12rpx;
width: 35rpx;
height: 35rpx;
}
.cancleSearch {
position: absolute;
right: 0;
width: 126rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 15px;
color: #323232;
}
.hide {
display: none;
}
.history {
float: left;
position: relative;
height: 100%;
width: 100%;
}
.history-header {
float: left;
position: relative;
height: 110rpx;
width: 100%;
}
.title {
position: absolute;
font-size: 13px;
color: #313131;
left: 7rpx;
top: 38rpx;
}
.delectHistory {
position: absolute;
width: 30rpx;
height: 30rpx;
top: 43rpx;
right: 57rpx;
}
.history-content {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: space-around;
flex-wrap: wrap;
margin-right: 50rpx;
height: 100%;
width: 650rpx;
}
.content {
font-size: 13px;
max-width: 400rpx; //缓存显示最大宽度
margin-top: 20rpx;
padding-left: 15rpx;
padding-right: 15rpx;
height: 50rpx;
line-height: 50rpx;
color: #757575;
text-align: center;
border-radius: 50rpx;
background-color: #f8f9fb;
overflow: hidden;
text-overflow: ellipsis; //文本超出400rpx的后面的内容用省略号代替
white-space: nowrap;
letter-spacing: 1px;
}
最后
完整源码。。。。今天github崩了，提交不了代码，等修好了再更新。。。