javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 微信小程序历史搜索功能

微信小程序实现历史搜索功能的全过程(h5同理)

作者：苏苏哇哈哈

最近在使用微信小程序开发的时候遇到了一个需求,需要实现历史搜索记录的功能,所以下面这篇文章主要给大家介绍了关于微信小程序实现历史搜索功能(h5同理)的相关资料,需要的朋友可以参考下

1.实现效果

2.实现原理

微信小程序中将数据存在storage中，除非用户手动触发，否则不会过期，同理，若想在浏览器中实现，只需将数据存在localStorage中即可。

wx.setStorageSync:

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。 存储的内容,只支持原生类型、Date、及能够通过JSON.stringify序列化的对象

注意：wx.setStorage是异步的，wx.setStorageSync是同步的，即要等待执行完才会去执行其他的代码

将已搜索的数据存在本地缓存中。

wx.setStorageSync('search_history', JSON.stringify(this.data.list))

选择存在本地缓存中的前15条数据显示在页面中。

 if (wx.getStorageSync('search_history') ){
     this.setData({
       list:JSON.parse(wx.getStorageSync('search_history') ).slice(0, 15)
     })
   }

每次选择历史数据的时候，将选择的数据移到数组的第一条。

 this.data.list.unshift(data);

点击'清空历史'按钮,wx.removeStorage清空存在本地缓存中的历史记录列表。

wx.removeStorageSync：

从本地缓存中移除指定 key，是wx.removeStorage 的同步版本。

3.实现步骤

hot_list:['杜甫','李白','李清照','姜子牙','万事如意，心想事成'],//热门搜索
list:[],//搜索历史列表
search： "",//当前搜索内容
onShow: function () {
    if (wx.getStorageSync('search_history') ){
      this.setData({
        list:JSON.parse(wx.getStorageSync('search_history') ).slice(0, 15)
      })
    }
},
 handleInput(e) {
    let data = e.detail.value.replace(/(^\s*)|(\s*$)/g, "");//去掉前后的空格
    if (data.trim() != '') {
      this.handleData(data)
    }
  },
  handleData(e) {
    this.data.list.forEach((item, index) => {
      if (item == e) {
        this.data.list.splice(index, 1);
      }
    })
    this.data.list.unshift(e);
    this.setData({
      list: this.data.list.slice(0, 15)
    })
    wx.setStorageSync('search_history', JSON.stringify(this.data.list))
  },
  handleIHotItem(e) {
    let { index } = e.currentTarget.dataset, { hot_list } = this.data;
    let search = hot_list[index]
    this.setData({
      search,
    })
    // 将标签存到历史搜索中
    this.handleData(search)
  },
  handleIHisItem(e) {
    let { index } = e.currentTarget.dataset, { list } = this.data;
    let search = list[index]
    this.setData({
      search: search
    })
    this.handleData(search)
  },
clearHistory() {
   this.setData({
     list:[]
   })
   wx.removeStorageSync('search_history')
 },

4.实现代码

<view class="head flex-row">
  <view class="head_input">
    <image src="/img/search_icon.png" class="search_icon"></image>
    <input type="text" placeholder="搜索" placeholder-class="place_holder" bindconfirm="handleInput" value="{{search}}"></input>
  </view>
  <view class="sha_icon" catchtap="clear_input">取消</view>
</view>
<view class="con">
  <view class="title">热门搜索</view>
  <view class="flex-row list">
    <block wx:for="{{hot_list}}" wx:key="index">
      <view class="c_item color" data-index="{{index}}" catchtap="handleIHotItem">{{item}}</view>
    </block>
  </view>
  <view wx:if="{{list.length>0}}">
    <view class="flex-row j_b">
      <view class="title">搜索历史</view>
      <view catchtap="clearHistory" class="clear">清空历史</view>
    </view>
    <view class="flex-row list">
      <block wx:for="{{list}}" wx:key="index">
        <view class="c_item" data-index="{{index}}" catchtap="handleIHisItem">{{item}}</view>
      </block>
    </view>
  </view>
</view>
Page({
  data: {
    hot_list: ['杜甫', '李白', '李清照', '姜子牙', '万事如意，心想事成'],
    list: [],
    search: "",//当前搜索内容
  },
  onShow: function () {
    if (wx.getStorageSync('search_history')) {
      this.setData({
        list: JSON.parse(wx.getStorageSync('search_history')).slice(0, 15)
      })
    }
  },
  handleInput(e) {
    let data = e.detail.value.replace(/(^\s*)|(\s*$)/g, "");//去掉前后的空格
    if (data.trim() != '') {
      this.handleData(data)
    }
  },
  handleData(e) {
    this.data.list.forEach((item, index) => {
      if (item == e) {
        this.data.list.splice(index, 1);
      }
    })
    this.data.list.unshift(e);
    this.setData({
      list: this.data.list.slice(0, 15)
    })
    wx.setStorageSync('search_history', JSON.stringify(this.data.list))
  },
  handleIHotItem(e) {
    let { index } = e.currentTarget.dataset, { hot_list } = this.data;
    let search = hot_list[index]
    this.setData({
      search,
    })
    // 将标签存到历史搜索中
    this.handleData(search)
  },
  handleIHisItem(e) {
    let { index } = e.currentTarget.dataset, { list } = this.data;
    let search = list[index]
    this.setData({
      search: search
    })
    this.handleData(search)
  },
  // 清空输入文字
  clear_input() {
    this.setData({
      search: ''
    })
  },
  //清空历史
  clearHistory() {
    this.setData({
      list: []
    })
    wx.removeStorageSync('search_history')
  },
})

总结

到此这篇关于微信小程序实现历史搜索功能(h5同理)的文章就介绍到这了,更多相关微信小程序历史搜索功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文