商品分类
商品分类
商品分类是一个单独的 tabBar 页面，当点击分类 tabBar 的时候就能够进入商品分类页面。
在商品分类页面我们主要实现三个功能：
- 一级分类的渲染
- 一级分类的切换
- 二级分类的渲染
01. 获取商品分类数据
思路分析：
在这一节，需要调用接口获取分类的数据
首先熟悉接口文档：获取分类层级数据
在熟悉了接口文档以后，根据接口文档封装接口 API 函数，然后在页面调用 API 函数获取分类的数据，在获取到数据以后，使用后端返回的数据对一级、二级分类进行渲染。
实现步骤：
- 在项目根目录下
api目录下新建category.js文件，用来管理分类页面接口请求 - 在该文件中导入封装的网络请求模块，根据接口文档，创建获取分类数据的
API函数reqCategoryData - 在
/pages/category/category.js中导入封装好的获取分类数据的API函数 - 页面数据需要在页面加载的时候进行调用，因此需要在
onLoad钩子函数中调用reqCategoryData方法 - 在获取到数据以后，使用后端返回的数据对页面进行渲染
落地代码：
➡️ api/category.js
// 导入封装的网络请求模块实例
import http from '../utils/http'
/**
* @description 获取商品分类的数据
* @returns Promise
*/
export const reqCategoryData = () => {
return http.get('/index/findCategoryTree')
}
➡️ page/category/category.js
// 导入封装的接口 API
import { reqCategoryData } from '../../api/category'
Page({
/**
* 页面的初始数据
*/
data: {
categoryList: [] // 分类数据列表
},
// 生命周期函数--监听页面加载
onLoad(options) {
// 获取页面中使用的
this.getCategoryData()
},
// 获取页面初始化时，页面中使用的数据
async getCategoryData() {
// 调用接口获取分类的数据
const res = await reqCategoryData()
this.setData({
categoryList: res.data
})
},
// 导航分类点击事件
// coding...
})
02. 渲染一级分类并实现切换功能
思路分析：
产品需求：
当进入分类页面的时候，第一个一级分类默认是高亮选中的状态
当点击任意的一级分类以后，对应的一级分类需要高亮选中 (active 类名)，其余的一级分类取消高亮选中
实现思路：
我们可以先初始化数据 activeIndex， 代表被激活的那一项的索引，默认值为 0
给一级分类绑定点击事件，当点击某个一级分类时，将对应分类的索引赋值给 activeIndex
这时候在模板中，可以拿遍历后一级分类的对应的索引 index 和 activeIndex 来进行对比
如果值一致，说明是当前分类被激活，添加 active 类名即可
实现步骤：
- 在
data中初始化变量activeIndex，初始值为 0 - 给一级分类绑定点击事件
updateActive，同时自定义一个自定义属性data-index值为索引index - 在事件处理程序
updateActive中，将index赋值给activeIndex - 在模板中进行
index和activeIndex的对比
落地代码：
➡️ page/category/category.html
<!-- 左侧的滚动视图区域 -->
<scroll-view class="left-view" scroll-y>
<view
+ wx:for="{{ categoryList }}"
+ wx:key="id"
+ bindtap="updateActive"
+ data-index="{{ index }}"
+ class="left-view-item {{ activeIndex === index ? 'active' : '' }}"
>
{{ item.name }}
</view>
</scroll-view>
➡️ page/category/category.js
Page({
// 页面的初始数据
data: {
categoryList: [], // 分类数据列表
+ activeIndex: 0, // 点击高亮导航id
},
+ // 导航分类点击事件
+ updateActive(e) {
+ this.setData({
+ activeIndex: e.currentTarget.dataset.index
+ })
+ }
// coding...
}
03. 获取 & 渲染二级分类数据
思路分析：
再次分析后端接口返回的数据 (如下图)，我们可以发现，在一级分类下存在 children 字段， children 字段中的数据则是一级分类对应的二级分类的数据，当我们访问一级分类时，只需要将一级分类对应的二级分类拿出来进行渲染即可。
那么，当我们访问一级分类时，如何拿到一级分类对应的二级分类数据呢 ❓
答案：索引 ❗，点击一级分类时，已经获取到索引 activeIndex，利用 activeIndex 获取对应二级分类数据即可
例如：当点击 鲜花玫瑰 时，该一级分类索引为 1，对应着索引为 1 的数据，即可取出对应 children 中的数据
实现步骤：
- 在模板中利用
activeIndex获取到对应二级分类的数据 - 对页面进行渲染即可
落地代码：
<!-- 右侧的滚动视图区域 -->
<scroll-view class="right-view" scroll-y enable-flex="true">
<view class="right-view-item" wx:for="{{ category[activeIndex].children }}" wx:key="id">
<navigator class="navigator" url="/pages/goods/list/list?category2Id={{item.id}}">
<image class="" src="{{ item.imageUrl }}"></image>
<text class='goods_item_name'>{{ item.name }}</text>
</navigator>
</view>
</scroll-view>