微信小程序—实现搜索功能 搜索历史记录功能

本文主要基于微信小程序实现和uni-app实现搜索商品和历史记录的功能。 不详细介绍，主看代码注释即可！！

1、搜索组件页面代码块

<template><view><!-- uni的搜索框 --><view class="search-box"><uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar></view><!-- 搜索建议列表 --><view class="sugg-list" v-if="searchResults.length !== 0"><view class="sugg-item" v-for="(item,i) in searchResults" :key="i" @click="gotoDatail(item)"><view class="goos-name"> {{item.goods_name}} </view><uni-icons type="arrowright" size="17" ></uni-icons></view></view><!-- 搜索历史盒子 --><view class="history-box" v-else><!-- 历史标题区域 --><view class="history-title"><text>搜索历史</text><uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons></view><!-- 历史记录列表区域 --><view class="history-list"><uni-tag :text="item" v-for="(item,i) in historyList" :key="i"></uni-tag></view></view></view></template>

页面实现效果图如下图：

2、样式代码块

<style lang="scss">.search-box {position: sticky; //搜索框黏性定位top: 0;z-index: 999;.uni-searchbar {background-color: #C00000 !important;}}//搜索列表样式.sugg-list {padding: 0 5px;.sugg-item {display: flex;align-items: center;justify-content: space-between; //两端对其font-size: 12px;padding: 13px 0;border-bottom: 1px solid #EEEEEE;.goos-name {white-space: nowrap; // 文字不允许换行overflow: hidden;text-overflow: ellipsis; //文本超出内容用。。。隐藏}}}//搜索历史样式.history-box {padding: 0 5px;.history-title {display: flex;justify-content: space-between; //两侧对齐height: 40px;align-items: center;font-size: 13px;border: 1px solid #efefef;.history-list {display: flex;flex-wrap: wrap;.uni-tag {margin: 0 2px;}}}}</style>

3、逻辑代码块

<script>export default {data() {return {timer: null, //接收定时器kw: '', //input的最新值searchResults: [], // 搜索的结果列表historyList: [], // 搜索历史的数组};},onLoad() {// 页面开始加载获取本地搜索历史存储数据this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]') //页面加载获取搜索历史},methods: {input(e) {// input 输入事件的处理函数// console.log(e) //可以拿到最新的值clearTimeout(this.timer) // 清除定时器// 节流处理this.timer = setTimeout(() => {//开启定时器// console.log(e)this.kw = e // 输入框最新值 赋值给kwthis.getSearchList() // 调用获取搜索}, 500)},// 获取搜索联想建议方法async getSearchList() {// 判断input的值是否为空if (this.kw.length === 0) {this.searchResults = [] // 清空搜索结果return // 停止执行}// 获取搜索结果const {data: res} = await uni.$http.get('/api/.....', {query: this.kw})// 判断是否成功获取数据if (res.meta.status !== 200) return uni.$showMsg()// 获取成功把结果赋值this.searchResults = res.messagethis.saveSearchHistory() // 调用保存搜索历史记录},// 搜索联想列表详细页跳转方法gotoDatail(item) {uni.navigateTo({url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id})},// 保存搜索历史记录并持久化历史搜索方法saveSearchHistory() {// 查找搜索历史结果数组中，重复的搜索const index = this.historyList.findIndex(x => x === this.kw) // 返回结果 -1代表没有// 判断是否大于0 大于等于存在if (index >= 0) {// 删除找到记录this.historyList.splice(index, 1)}// 把input新值向数组开头添加this.historyList.unshift(this.kw)//持久化搜索历史uni.setStorageSync('kw', this.historyList)},// 清空搜索历史记录方法cleanHistory() {// 清空 data 中保存的搜索历史this.historyList = []// 清空本地存储中记录的搜索历史uni.setStorageSync('kw', '[]')}}}</script>

以上就是实现小程序搜索功能，历史记录功能的实现，当然这也是一种实现思路方法，没有完全正确的。