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

作者：计算机魔术师

2022 年 8 月 30 日
广东
本文字数：2516 字
阅读完需：约 8 分钟

🤵‍♂️ 个人主页: @计算机魔术师👨‍💻 作者简介：CSDN 内容合伙人，全栈领域优质创作者。

🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推|

还没有账户的小伙伴<font size=5> 速速点击链接登录注册把！🎉🎉

该文章收录专栏✨ 2022微信小程序京东商城实战 ✨

一、搜索历史的基本结构

在data 定义数据存贮搜索历史

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

复制代码

渲染 UI 结构

 <!-- 搜索历史容器 -->    <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;      }    }  }

复制代码

效果

1.1 按需显示

（搜索时只显示建议，不显示历史）

解决(添加 block 判断条件）

    <!-- 搜索建议列表容器 -->    <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>

复制代码

二、处理历史搜索关键词

需要做到：

添加关键词（push)
最近时间查询的放在数组第一位（reverse，unshfit)

注意：因为列表是可变的，如果直接对列表使用reverser()，第二两翻转时第二个就变成倒数第二个了，原因在于你翻转之后 push 元素，应该在列表不变情况 push,解决办法有两种，第一种:翻转显示后，在进行 push 之前按，再 reverse 翻转回去在 push 第二种：...展开列表 reverse（此时不改变原列表），此时可以在 computed（计算属性，类似数据监听器和过滤器，有缓存机制）中返回 reverse 的值
建议使用unshift直接添加第一项

去重（使用集合性质 Set）

代码实现（在调取数据成功时调用一下函数）

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

复制代码

效果：

三、保存历史记录到本地

由于每次编译都会被清空，所以我们需要保存记录到本地缓存

使用 uni.setStorageSync(键，值) 将数据存贮在本地

  // 添加到历史      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 初始化导入本地数据

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

复制代码

效果

四、按下 trash 键清空历史

绑定事件处理函数clearhistory

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

复制代码

clearhistory函数定义

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

复制代码

效果

五、点击搜索历史跳转到商品详情页

每个标签绑定click事件

<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

复制代码

效果

六、search 分支的提交

git branch 查看分支
git add . 提交到暂存区
git commit -m "完成了search的开发" 提交到本地仓库
git push origin -u search 提交到远程仓库的 search 分支
git checkout master 切换到主分支
git merge search 合并 search 分支
git push 提交到远程仓库主分支
git branch -d search 删除 search 分支

 ✨谢谢你的阅读，您的点赞和收藏就是我创造的最大动力！✨

复制代码

发布于: 刚刚阅读数: 3

计算机魔术师

关注

还未添加个人签名 2022.08.13 加入

还未添加个人简介

发布

暂无评论

创作场景

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

一、搜索历史的基本结构

1.1 按需显示

二、处理历史搜索关键词

三、保存历史记录到本地

四、按下 trash 键清空历史

五、点击搜索历史跳转到商品详情页

六、search 分支的提交

计算机魔术师

评论