uni-app商城项目(五)-创建 search 分支

沧怜月

已于 2023-05-18 14:39:05 修改

阅读量132

点赞数

分类专栏： uni-app 文章标签： uni-app ui 前端

于 2023-04-10 14:19:55 首次发布

本文链接：https://blog.csdn.net/qq_45811054/article/details/130059043

版权

本文详细介绍了如何在uni-app中创建自定义搜索组件，包括设置组件样式，增加通用性，封装点击事件，实现吸顶效果。接着讲解了搜索建议的渲染，自动获取焦点，防抖处理，以及根据关键词获取搜索建议列表。此外，还涵盖了搜索历史的存储、展示及清空功能，最后讨论了代码的合并与提交流程。

摘要由CSDN通过智能技术生成

五、创建 search 分支

#5.1 自定义搜索组件

#5.1.1 自定义 my-search 组件

#5.1.2 通过自定义属性增强组件的通用性

#5.1.3 为自定义组件封装 click 事件

#5.3.2 实现搜索建议和搜索历史的按需展示

#5.3.3 将搜索关键词存入 historyList

#5.3.4 解决关键字前后顺序的问题

#5.3.5 解决关键词重复的问题

#5.3.6 将搜索历史记录持久化存储到本地

#5.3.7 清空搜索历史记录

#5.3.8 点击搜索历史跳转到商品列表页面

#5.4 分支的合并与提交

五、创建 search 分支

运行如下的命令，基于 master 分支在本地创建 search 子分支，用来开发搜索相关的功能：

git checkout -b search

#5.1 自定义搜索组件

#5.1.1 自定义 my-search 组件

在项目根目录的 components 目录上，鼠标右键，选择 新建组件，填写组件信息后，最后点击 创建 按钮：
在分类页面的 UI 结构中，直接以标签的形式使用 my-search 自定义组件：
```

<my-search></my-search>
```

定义 my-search 组件的 UI 结构如下：

<template>
  <view class="my-search-container">
    <!-- 使用 view 组件模拟 input 输入框的样式 -->
    <view class="my-search-box">
      <uni-icons type="search" size="17"></uni-icons>
      <text class="placeholder">搜索</text>
    </view>
  </view>
</template>

注意：在当前组件中，我们使用 view 组件模拟 input 输入框的效果；并不会在页面上渲染真正的 input 输入框

美化自定义 search 组件的样式：

.my-search-container {
  background-color: #c00000;
  height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.my-search-box {
  height: 36px;
  background-color: #ffffff;
  border-radius: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .placeholder {
    font-size: 15px;
    margin-left: 5px;
  }
}

由于自定义的 my-search 组件高度为 50px，因此，需要重新计算分类页面窗口的可用高度：

onLoad() {
  const sysInfo = uni.getSystemInfoSync()
  // 可用高度 = 屏幕高度 - navigationBar高度 - tabBar高度 - 自定义的search组件高度
  this.wh = sysInfo.windowHeight - 50
}

#5.1.2 通过自定义属性增强组件的通用性

为了增强组件的通用性，我们允许使用者自定义搜索组件的 背景颜色 和 圆角尺寸

props: {
  // 背景颜色
  bgcolor: {
    type: String,
    default: '#C00000'
  },
  // 圆角尺寸
  radius: {
    type: Number,
    // 单位是 px
    default: 18
  }
}

通过属性绑定的形式，为 .my-search-container 盒子和 .my-search-box 盒子动态绑定 style 属性：

<view class="my-search-container" :style="{'background-color': bgcolor}">
  <view class="my-search-box" :style="{'border-radius': radius + 'px'}">
    <uni-icons type="search" size="17"></uni-icons>
    <text class="placeholder">搜索</text>
  </view>
</view>

移除对应 scss 样式中的 背景颜色 和 圆角尺寸：

.my-search-container {
  // 移除背景颜色，改由 props 属性控制
  // background-color: #C00000;
  height: 50px;
  padding: 0 10px;
  display: flex;
  align-items: center;
}

.my-search-box {
  height: 36px;
  background-color: #ffffff;
  // 移除圆角尺寸，改由 props 属性控制
  // border-radius: 15px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .placeholder {
    font-size: 15px;
    margin-left: 5px;
  }
}

#5.1.3 为自定义组件封装 click 事件

在 my-search 自定义组件内部，给类名为 .my-search-box 的 view 绑定 click 事件处理函数：

<view class="my-search-box" :style="{'border-radius': radius + 'px'}" @click="searchBoxHandler">
  <uni-icons type="search" size="17"></uni-icons>
  <text class="placeholder">搜索</text>
</view>