前言:
我们在进行一些项目开发时,很有可能会涉及到在搜索框中搜索某一个词条,从而进行相应的检索。
在这里就会出现一个优化功能,我们在搜索后的某一个词条,我希望能够显示在历史记录中。这样一个小的tip,可以给用户带来更高的使用体验。
历史记录并不会保存在后端,因为历史记录本身体积小,也为了方便对其操作,一般保存在本地中。
该功能重要方法为本地存取,代码如下:
// 微信小程序的文档中有对本地存储的功能简述
wx.setStorage({
key: 'history',
data: JSON.stringify(val)
})
key:你存在本地缓存中的key
data:你存在本地缓存中的数据,注意,这里存进去的时JOSN对象,需要做转型处理
小程序本地存储https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html
// 小程序获取对应key值数据
wx.getStorage({
key: 'history',
success(res) {
that.historyList = JSON.parse(res.data)
}
})
success是该方法成功触发的回调函数,在里面你可以进行一些操作
注意,这里会存在this指向的问题,将this在该方法的作用域中赋值给that,可以解决,详细的解释可以自行搜索查证
小程序本地取出https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.getStorage.html
需求分析:
搜索历史应该包含以下效果:
1.空格无效
2.存储词条
3.删除词条
4.获取词条
我们在搜索框中输入词条后,跳转到某个页面返回后它应该显示在历史记录的位置,并且不论我跳转到了哪个页面,我都应该能够保留这个词条信息,而且我能够删除这些词条。
效果图
实现
注意,该功能基于uview框架开发。
html部分
<template>
<view class="layout">
<!-- 自定义导航栏 -->
<view>
<u-navbar bgColor="#f4f5f6" autoBack height="88rpx" placeholder>
<template #center>
<view class="navbar_center">
<u-search
v-model="value"
placeholder="输入关键字"
clearabled
@search="onSearch"
:showAction="false"
bgColor="#FFFFFF">
</u-search>
</view>
</template>
</u-navbar>
</view>
<view class="history-style">
<span class="font-12 font-b">历史搜索</span>
<u-icon
name="trash"
color="#808080"
size="14"
:bold="true"
@click="showModal">
</u-icon>
</view>
<!-- tag -->
<view class="tag-style">
<template v-for="(item, id) in historyList">
<view class="tag-margin" :key="id">
<u-tag
:text="item"
bgColor="#EBEBEB"
size="mini"
borderColor="transparent"
color="black">
</u-tag>
</view>
</template>
</view>
<u-modal
:show="show"
:closeOnClickOverlay="true"
showConfirmButton
showCancelButton
:content='content'
@close="close"
@cancel="close"
@confirm="delTags">
</u-modal>
</view>
</template>
在这里样式不做赘述,只研究功能的实现,
注意看,我在search组件中使用了双向绑定,当我在对value做操作时,value的数据会进行同步,当我确认好我输入的词条后,触发@search事件,
js部分
<script>
export default {
name: 'SearchIndex',
data() {
return {
value: '',
show: false,
content: '确认删除全部历史记录?',
skipAddress: '/pages/index/index',
historyList: []
}
},
onLoad() {
this.getRecord()
},
// created() {
// this.getRecord()
// },
// mounted() {
// this.getRecord()
// },
methods: {
judge(val) {
// 判断历史记录是否超过10条
if(this.historyList.length < 10) {
// 判断历史记录中有没有搜索过的词条
if(!this.historyList.includes(val)){
if(val.length > 4) {
val = val.slice(0,3).trim() + '...'
}
// 存入本地
this.historyList.unshift(val);
this.setRecord(this.historyList)
}
}else {
// 判断历史记录中有没有搜索过的词条
if(!this.historyList.includes(val)){
if(val.length > 4) {
val = val.slice(0,3).trim() + '...'
}
//有搜索记录,删除之前的旧记录,将新搜索值重新push到数组首位
let i = this.historyList.indexOf(val);
this.historyList.splice(i,1)
// 存入本地
this.historyList.unshift(val);
this.setRecord(this.historyList)
}
}
},
// 获取本地记录
getRecord() {
let that = this
wx.getStorage({
key: 'history',
success(res) {
that.historyList = JSON.parse(res.data)
}
})
},
// 存储本地数据
setRecord(val) {
console.log(val);
wx.setStorage({
key: 'history',
data: JSON.stringify(val)
})
},
// 确认搜索
onSearch(val) {
this.judge(val)
this.value = ''
},
// 是否展示modal
showModal() {
this.show = true
},
// 是否关闭modal
close() {
this.show = false
},
// 删除tags
delTags() {
wx.clearStorage()
this.historyList = ''
this.show = false
}
}
}
</script>
这里我将判断以及存储值得操作抽象出来,写在了一个方法里。这里将所有操作写在onSearch中也是一样的,并没有区别。
search事件是当搜索框确认时触发的事件,当我们确认输入的内容后调用judge方法,
if(this.historyList.length < 10) {
// 这里进行满足条件的操作
}else {
//有搜索记录,删除之前的旧记录,将新搜索值重新push到数组首位
let i = this.historyList.indexOf(val);
this.historyList.splice(i,1)
this.historyList.unshift(val);
this.setRecord(this.historyList)
}
这里我对历史记录的长度做了一个约束——不能大于10,意思就是只记录10条信息,超过10条,就会将最后一条信息删除,将新的信息放在数组的最前边。
// 判断历史记录中有没有搜索过的词条
if(!this.historyList.includes(val)){
if(val.length > 4) {
val = val.slice(0,3).trim() + '...'
}
// 存入本地
this.historyList.unshift(val);
this.setRecord(this.historyList)
}
满足条件时,这里我又对输入的信息做了一个限制,当输入的val值长度超过4个长度时,截取val值前3个字符拼接上...。
// 删除tags
delTags() {
wx.clearStorage()
this.historyList = ''
this.show = false
}
wx.clearStorage() // 清除本地存储
this.historyList = '' // 将关联的数组清空
this.show = false // show是控制modal组件的开关 为true时显示,为false为隐藏
当我需要删除这些tag时,我点击垃圾桶的icon,就会触发删除事件。
以上,就是关于搜索历史记录的解析和解决办法,希望对你有所帮助,觉得文章不错可以点赞关注,支持博主。