青橙优购——分类

分类

1 创建 cate 分支

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

git checkout -b cate

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

1. 定义页面结构如下：

• 但是会有占不满屏幕的问题：

1. 查看uni-app官方文档有一个API

2. 这里选定API中的windowHeight参数（screenHeight是整个可见屏幕的高度包含上下的导航）

3. data中定义一个变量，同时在onLoad中调用这个API，将得到的数据赋值给这个变量，同时动态绑定到页面上的高度

   <script>
     export default {
       data() {
         return {
           // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
           wh: 0
         };
       },
       onLoad() {
         // 获取当前系统的信息
         const sysInfo = uni.getSystemInfoSync()
         // 为 wh 窗口可用高度动态赋值
         this.wh = sysInfo.windowHeight
       }
     }
   </script>
   

4. 美化页面结构：

3 获取分类数据

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

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

3. 在 methods中定义获取分类列表数据的方法

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

1. 循环渲染列表结构：

   <!-- 左侧的滚动视图区域 -->
   <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
     <block v-for="(item, i) in cateList" :key="i">
       <view class="left-scroll-view-item">{{item.cat_name}}</view>
     </block>
   </scroll-view>
   

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

   data() {
     return {
       // 当前选中项的索引，默认让第一项被选中
       active: 0
     }
   }
   

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

   <block v-for="(item, i) in cateList" :key="i">
     <view :class="['left-scroll-view-item', i === active ? 'active' : '']">{{item.cat_name}}</view>
   </block>
   

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

   <block v-for="(item, i) in cateList" :key="i">
     <view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">{{item.cat_name}}</view>
   </block>
   

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

   methods: {
     // 选中项改变的事件处理函数
     activeChanged(i) {
       this.active = i
     }
   }
   

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

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

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

   这里由于获取到的并不是直接的数组

要this.cateTwoList = res.message[0].children一定记得下标因为不是调属性

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

   activeChanged(i) {
     this.active = i
     // 为二级分类列表重新赋值
     this.cateLevel2 = this.cateList[i].children
   }
   

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

   <!-- 右侧的滚动视图区域 -->
   <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}">
     <view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2">
       <view class="cate-lv2-title">/ {{item2.cat_name}} /</view>
     </view>
   </scroll-view>
   

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

   .cate-lv2-title {
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     padding: 15px 0;
   }
   

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

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

这里由于项目的接口地址改变要重新给数组赋值

由于切换分类因此要重新赋值

切换页面的函数内调用即可，注意顺序

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

1. 在 data 中定义 滚动条距离顶部的距离：

   data() {
     return {
       // 滚动条距离顶部的距离
       scrollTop: 0
     }
   }
   

2. 动态为右侧的 <scroll-view> 组件绑定 scroll-top 属性的值：

   <!-- 右侧的滚动视图区域 -->
   <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop"></scroll-view>
   

3. 切换一级分类时，动态设置 scrollTop 的值：

   // 选中项改变的事件处理函数
   activeChanged(i) {
     this.active = i
     this.cateLevel2 = this.cateList[i].children
   
     // 让 scrollTop 的值在 0 与 1 之间切换
     this.scrollTop = this.scrollTop === 0 ? 1 : 0
   
     // 可以简化为如下的代码：
     // this.scrollTop = this.scrollTop ? 0 : 1
   }
   

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

1. 为三级分类的 Item 项绑定点击事件处理函数如下：

   <view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3" @click="gotoGoodsList(item3)">
     <image :src="item3.cat_icon"></image>
     <text>{{item3.cat_name}}</text>
   </view>
   

2. 定义事件处理函数如下：

   // 点击三级分类项跳转到商品列表页面
   gotoGoodsList(item3) {
     uni.navigateTo({
       url: '/subpkg/goods_list/goods_list?cid=' + item3.cat_id
     })
   }
   

3. 开启AdminJS成长之旅！这是我参与「AdminJS日新计划 · 2 月更文挑战」的第 11 天，点击查看活动详情