【小程序项目开发-- 京东商城】uni-app之自定义搜索组件（下） -- 搜索历史

  data() {
      return {
        // 输入数据
        inputString: '',
        // 延时器
        timer: null,
        // 搜索建议
        searchSuggest: '',
        // 搜索历史
        histortSearch: ['a','apple','money']
      };
    },

 <!-- 搜索历史容器 -->
    <view class="history-list-container">
      <!-- 标题区域 -->
      <view class="history-head-box">
        <text>搜索历史</text>
        <uni-icons type="trash" size="17"></uni-icons>
      </view>
      <!-- 列表区域 -->
      <view class="history-item-container">
        <view class="history-item" v-for="(item,i) in histortSearch" :key="i">
          <uni-tag :text="item" custom-style="background-color:#f9f9f9; color: black;" inverted="true"></uni-tag>
        </view>
      </view>
    </view>

  .history-list-container {
    .history-head-box {
      display: flex;
      justify-content: space-between;
      padding: 18rpx;
      border-bottom: 3rpx solid #ebebeb;
      font-size: 28rpx;
      align-items: center;
    }

    .history-item-container {
      display: flex;

      .history-item {
        margin: 10rpx;
      }
    }
  }

    <!-- 搜索建议列表容器 -->
    <block v-if="inputString.length != 0">
      <view class="sgg-list-container">
        <navigator class="sgg-item" v-for="(product,i) in searchSuggest" v-bind:key="i"
          :url="'/subpackages/goods_detail/goods_detail?cat_id=' + product.goods_id">
          <view class="sgg-name">{{product.goods_name}}</view>
          <uni-icons type="right"></uni-icons>
        </navigator>
      </view>
    </block>
    <!-- 搜索历史容器 -->
    <block v-if="inputString.length === 0">
      <view class="history-list-container">
        <!-- 标题区域 -->
        <view class="history-head-box">
          <text>搜索历史</text>
          <uni-icons type="trash" size="17"></uni-icons>
        </view>
        <!-- 列表区域 -->
        <view class="history-item-container">
          <view class="history-item" v-for="(item,i) in histortSearch" :key="i">
            <uni-tag :text="item" custom-style="background-color:#f9f9f9; color: black;" inverted="true"></uni-tag>
          </view>
        </view>
      </view>
    </block>

// 添加到历史
      addhistory(){
        this.histortSearch.unshift(this.inputString)
        // this.histortSearch.reverse()
        const res = new Set(this.histortSearch) //创建set对象 需要用new
        this.histortSearch = Array.from(res)
      }

  // 添加到历史
      addhistory() {
        this.histortSearch.unshift(this.inputString)
        // this.histortSearch.reverse()
        const res = new Set(this.histortSearch) //创建set对象 需要用new
        this.histortSearch = Array.from(res)
        // 将存贮数据存贮在本地
        uni.setStorageSync('history', JSON.stringify(this.histortSearch))
      }
    },

onLoad() {
   this.histortSearch = JSON.parse(uni.getStorageSync ('history') || '[]') // 通过键得到值，JSON解析字符串为数组对象 不存在对象则为空数组 
 },

<uni-icons type="trash" size="17" @click="clearHistory"></uni-icons>

// 清空历史
  clearHistory() {
    this.histortSearch = []
    uni.setStorageSync('history',['']) //必须重新赋值为空数组，只能为数组数据类型
  },

<uni-tag :text="item" custom-style="background-color:#f9f9f9; color: black;" inverted="true" @click="gotogoodslist(item)"></uni-tag>

 // 点击tag事件
gotogoodslist(item){
    uni.navigateTo({
      url:'/subpackages/goods_list/goods_list?query=' + item