如何实现搜索历史记录

方法

  • 用缓存, 其中data为数组类型不是单个的值,因为搜索的历史记录是一个数组
  • 搜素内容时用wx.setStorage存入缓存,每次将搜索存入缓存的时候,为了避免重复添加,要先确定要存入的搜索内容是否已经存在数组里了,已经存在不添加,不存在添加到数组头部再写入缓存覆盖之前的数组
  1. 如何判断数组是否有某个关键字
    es6之前用indexOf
    es6用includes()方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
  2. 如何将某个关键字写入数组的头部?
    unshift()方法可向数组的开头添加一个或更多元素,并返回新的长度
  3. 增加用户体验
    方法一限制数组的长度:不存关键字后,判断数组长度,超过10用方法pop()将数组末尾的元素去掉
    方法二设置一个删除按钮让用户自己删除历史记录:使用wx.removeStorage方法删除历史记录的缓存

input输入框的属性

  • bindinput:键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容。
  • bindfocus:输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持
  • bindconfirm:点击完成按钮时触发,event.detail = {value: value}
  • 点击搜索的时候,用wx.getStorage获取历史记录的缓存,显示历史记录

当历史记录为空的时候,wx.getStorage方法返回空

猜你喜欢

转载自blog.csdn.net/weixin_43663349/article/details/118199001