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

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

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>

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