应用场景
很多搜索场景内都能用到这个功能
大概就是用户搜索了某个关键字 然后搜索的关键字可以持久的保存下来文章来源:https://www.toymoban.com/news/detail-707302.html
下次打开搜索的时候可以达到快速点击搜索的效果文章来源地址https://www.toymoban.com/news/detail-707302.html
实现步骤
1. 先给输入框双向绑定数据和事件
<input v-model="keyWord">
2. 给搜索按钮绑定点击事件
<button @click="search">搜索</button>
3. 在事件内去处理相关逻辑
methods: {
search(){
// historyList 为历史搜索的列表
// 先做逻辑判断 keyWord 在history内是否存在 如果存在 就把原来的删除 把最新的添加到最前面
// 如果不存在 就直接加到最前面
this.historyList.unshift(this.keyWord)
this.keyWord = ''
// 把列表储存到本地
uni.setStorageSync('historyList', this.historyList)
}
}
4. 在页面加载的时候就从本地获取列表
onLoad(){
this.historyList = uni.getStorageSync('historyList')
}
5. 把列表循环渲染到对应的位置
到了这里,关于uniapp-历史搜索记录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!