新建自定义分类组件

新建目录components，在新建组件

自定义搜索组件的基本布局

解决一个小bug

获取到的屏幕的可用高度要减去搜索框的50高度

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

为了增强组件的通用性，我们允许使用者自定义搜索组件的背景颜色和圆角尺寸。
1.通过props定义bgcolor和radius两个属性，并指定值类型和属性默认值
	props存在于子组件中
	props 是 Vue 组件中用来接收父组件传递的数据的属性，通常用于父子组件之间的数据传递。
	当一个组件被用作另一个组件的子组件时，父组件可以通过 props 在子组件中注册需要传递的数据。然后，在子组件中就可以通过访问这些 props 属性来获取父组件传递过来的数据。
2.通过属性绑定的形式，为.my-search-container盒子和.my-search-box盒子动态绑定style属性
3.移除对应scss样式中的背景颜色和圆角尺寸

父组件使用的时候，不写的话，就用默认的，写的话，就使用自己的

为自定义组件封装click事件

要想父组件里面，给子组件传递点击事件，并生效。可以这样

现在点击的时候，父组件和子组件就都就可以显示了
就是使用 this.$emit('事件名') 来触发

点击分类页面上面的搜索组件，跳转到搜索页面

实现首页搜索组件的吸顶效果

吸顶效果：就是页面向上滑动的时候，搜素框一直在固定的位置

搜索建议

先渲染一下搜索页面的基本机构

现在需要修改背景颜色，需要修改这个组件的源代码了

通过input事件，通过变量e，获取到用户输入的值

实现搜索框自动获取焦点的功能

点击搜索框，跳转到搜索页面，搜索框自动获取焦点，用户可以直接输入文字
要改一下源码

输入框的防抖效果

现在每输入一个字，就会多打印出一个，如果我们搜索东西的时候，每输入一次就会发一次请求，这样是不合理的
如何：用户500ms之内，连续输入就不发起请求，只有超过500ms没有输入，才发起请求
这时候，就需要做防抖处理了
1.在data中定义防抖的延时器timer
2.修改input事件处理函数如下

根据关键词查询搜索建议列表

1、在data中定义数据节点，用来存放搜索建议的列表数据
2.在防抖的setTimeout中，调用getSearchList方法获取搜索建议列表
3.在methods中定义getSearchList方法

渲染搜索建议列表的UI结构

美化搜索建议列表的UI结构

最主要就是实现单行的形式，就算文字太长，也不要换行
超出这行之后，多余的部分用三个小圆点代替

点击建议项，跳转到详情页面

搜索历史区域的绘制

美化搜索历史区域的样式

搜索历史区域和搜索建议区域按需展示

逻辑上这两个，只需要展示一个

将搜索关键词存入historyList

搜索历史一般有两个限制：最后搜索的放在最前面，相同的需要合并
上面的这个做法，不能解决解决这两个问题

解决关键字重复的问题

Set对象是值的集合，你可以按照插入的顺序迭代它的元素。Set中的元素只会出现一次，即Set中的元素是唯一的。
实例：

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

清空搜索历史

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