微信小程序开发（七）- uni-app微信小程序商城

目录

四、分类

4.0 创建 cate 分支

4.1 渲染分类页面的基本结构

4.2 获取分类数据

4.3 动态渲染左侧的一级分类列表

4.4 动态渲染右侧的二级分类列表

4.5 动态渲染右侧的三级分类列表

4.6 切换一级分类后重置滚动条的位置

4.7 点击三级分类跳转到商品列表页面

4.8 分支的合并与提交

五、搜索

5.0 创建 search 分支

5.1 自定义搜索组件

5.1.1 自定义 my-search 组件

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

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

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

5.2 搜索建议

5.2.1 渲染搜索页面的基本结构

5.2.2 实现搜索框自动获取焦点

5.2.3 实现搜索框的防抖处理

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

5.2.5 渲染搜索建议列表

5.3 搜索历史

5.3.1 渲染搜索历史记录的基本结构

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

5.3.3 将搜索关键词存入 historyList

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

5.3.5 解决关键词重复的问题

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

5.3.7 清空搜索历史记录

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

5.4 分支的合并与提交

四、分类

4.0 创建 cate 分支

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

git checkout -b cate

这里代码手误，写成 search 分支了，注意一下。

4.1 渲染分类页面的基本结构

1. 定义页面结构如下：

2. 动态计算窗口的剩余高度：

3. 美化页面结构：

4.2 获取分类数据

1. 在 data 中定义分类数据节点：

2. 调用获取分类列表数据的方法：

3. 定义获取分类列表数据的方法：

4.3 动态渲染左侧的一级分类列表

1. 循环渲染列表结构：

2. 在 data 中定义默认选中项的索引：

3. 循环渲染结构时，为选中项动态添加 .active 类名：

4. 为一级分类的 Item 项绑定点击事件处理函数 activeChanged：

5. 定义 activeChanged 事件处理函数，动态修改选中项的索引：

4.4 动态渲染右侧的二级分类列表

1. 在 data 中定义二级分类列表的数据节点：

2. 修改 getCateList 方法，在请求到数据之后，为二级分类列表数据赋值：

3. 修改 activeChanged 方法，在一级分类选中项改变之后，为二级分类列表数据重新赋值：

4. 循环渲染右侧二级分类列表的 UI 结构：

5. 美化二级分类的标题样式：

4.5 动态渲染右侧的三级分类列表

1. 在二级分类的 <view> 组件中，循环渲染三级分类的列表结构：

2. 美化三级分类的样式：