微信小程序如何實現搜索商品和歷史記錄的功能

本篇內容介紹了“微信小程序如何實現搜索商品和歷史記錄的功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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>

“微信小程序如何實現搜索商品和歷史記錄的功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！