微信小程序如何实现搜索商品和历史记录的功能

本篇内容介绍了“微信小程序如何实现搜索商品和历史记录的功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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 // 输入框最新值 赋值给kw           this.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.message         this.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>

“微信小程序如何实现搜索商品和历史记录的功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！