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

本文主要基于微信小程序实现和uni-app实现搜索商品和历史记录的功能。不详细介绍，主看代码注释即可！！1、搜索组件页面代码块templateview!--uni的搜索框--...

本文主要基于微信小程序实现和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 {
   backwww.cppcns.comground-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({
 www.cppcns.com    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>

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

希望对大家的学习有所帮助，也希望大家多多支持我们。