微信小程序商城类项目使用到的前端效果（1）——搜索历史记录_前端小程序 第一次点击记录第一个索引值 第二次点击记录第二个索引值效果代码示例

搜素暂存的历史记录，最多5条历史记录

<!-- 搜索框 -->
<form>
  <view class="search">
    <image src="/images/search.png"></image>
    <input maxlength="20" placeholder="搜索海量商品" confirm-type="search" value="{{Replymessage}}"	bindconfirm="inputTyping" confirm-type="search"  />
  </view>
</form>
<view class="block" hidden="{{!inputShowed}}" >
	<view class="top">
		<view class="title">最近搜索</view>
		<image bindtap="delete" class="deleteicon" src="/images/order/del.png"></image>
	</view>
	<view class="row">
    <block wx:if="{{searchRecord.length>0}}">
		  <view class="item"  wx:for="{{searchRecord}}" wx:key="index" bindtap="slideToList" data-keyword="{{item.value}}">{{item.value}}</view>
    </block >
    <view wx:else class="no-record">你还没有搜索记录</view>
	</view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

js部分

data: {
    hotsearch: [],
    searchRecord: [],
  },
  onLoad: function (options) {
    this.openHistorySearch()
  },
  openHistorySearch: function () {//获取历史记录
    this.setData({
      searchRecord: wx.getStorageSync('searchRecord') || [],//若无储存则为空
    })
  },
  inputTyping(e) {
    var Replymessage = e.detail.value;
    var searchRecord = this.data.searchRecord;
    if (Replymessage == '') {
      swan.showToast({
        title: '请输入要搜索的内容！',
        icon: 'none'
      });
    }else{
      var index = this.functiontofindIndexByKeyValue(searchRecord, "value", Replymessage)//查询输入的关键词在历史记录中是否存在
      if (index == null){//当不存在时加到数组中
        //将搜索值放入历史记录中,只能放前五条
        if (searchRecord.length < 5) {
          searchRecord.unshift({
              value: Replymessage,
              id: searchRecord.length
          })
        }else {
          searchRecord.pop()//删掉旧的时间最早的第一条
          searchRecord.unshift({
              value: Replymessage,
              id: searchRecord.length
          })
        }
        //将历史记录数组整体储存到缓存中
        wx.setStorageSync('searchRecord', searchRecord)
      }else{//否则将这个关键字移到最前面
        var data = searchRecord[index];
        searchRecord.splice(index,1);
        searchRecord.unshift(data);
        wx.setStorageSync('searchRecord', searchRecord)
      }
      wx.navigateTo({
        url: '/pages/list/list?keyword=' + Replymessage,
      })
    }
  },
  functiontofindIndexByKeyValue: function(arraytosearch, key, valuetosearch) {
    for(var i = 0; i<arraytosearch.length; i++) {
      if (arraytosearch[i][key] == valuetosearch) {
        return i;
      }
    }
    return null;
  },
  //删除历史记录
  delete: function () {
    wx.clearStorageSync('searhRecord')
    this.setData({
      searchRecord: []
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

https://blog.csdn.net/weixin_41531446/article/details/81116075