辽宁城建设计院有限公司网站,电子工程院官网,网站后台数据应该怎么做,手机网站底部固定菜单搜搜历史管理
需求#xff1a;
点击搜索#xff08;添加历史#xff09;
点击 搜索按钮后 或者 底下历史记录#xff0c;都能进行搜索#xff08;相当于跳转到搜索的列表组件#xff09;
① 若之前 没有 相同的搜索关键字#xff0c;则在搜素历史的最前面直接…搜搜历史管理
需求
点击搜索添加历史
点击 搜索按钮后 或者 底下历史记录都能进行搜索相当于跳转到搜索的列表组件
① 若之前 没有 相同的搜索关键字则在搜素历史的最前面直接添加
② 若之前 已有 相同的搜索关键字将原有的关键字移除再追加 清空历史点击清空图标可以清空历史记录持久化 搜素历史需要持久化刷新历史不会丢失
1. data 中提供数据和搜索框双向绑定 (实时获取用户内容)
data () {return {search: }
}van-search v-modelsearch show-action placeholder请输入搜索关键词 clearabletemplate #actiondiv搜索/div/template
/van-search2. 准备假数据进行基本的历史纪录渲染
data () {return {...history: [手机, 空调, 白酒, 电视]}
},div classsearch-history v-ifhistory.length 0...div classlistdiv v-foritem in history :keyitem clickgoSearch(item) classlist-item{{ item }}/div/div
/div3. 点击搜索或者下面搜索历史按钮都要进行搜索历史记录更新 (去重新搜索的内容置顶)
div clickgoSearch(search)搜索/divdiv classlistdiv v-foritem in history :keyitem clickgoSearch(item) classlist-item{{ item }}/div
/divgoSearch (key) {if (this.search ) {return
}const index this.history.indexOf(key)if (index ! -1) {this.history.splice(index, 1)}this.history.unshift(key)this.$router.push(/searchlist?search${key})
}4. 清空历史
van-icon clickclear namedelete-o size16 /clear () {this.history []this.search
}持久化管理
1. 持久化到本地 - 封装方法
const HISTORY_KEY hm_history_list// 获取搜索历史
export const getHistoryList () {const result localStorage.getItem(HISTORY_KEY)return result ? JSON.parse(result) : []
}// 设置搜索历史
export const setHistoryList (arr) {localStorage.setItem(HISTORY_KEY, JSON.stringify(arr))
}2. 页面中调用 - 实现持久化
data () {return {search: ,history: getHistoryList()}
},
methods: {goSearch (key) {...setHistoryList(this.history)this.$router.push(/searchlist?search${key})},clear () {this.history []setHistoryList([])this.$toast.success(清空历史成功)}
}
