???欢迎来到???
??魔术之家！！??

该文章收录专栏
? 2022微信小程序京东商城实战 ?

专栏内容
? 京东商城uni-app项目搭建 ?
? 京东商城uni-app 配置tabBar & 窗口样式 ?
? 京东商城uni-app开发之分包配置 ?
? 京东商城uni-app开发之轮播图 ?
? 京东商城uni-app之分类导航区域 ?
? 京东商城uni-app 首页楼层商品 ?
? 京东商城uni-app 商品分类页面（上） ?
? 京东商城uni-app 商品分类页面（下） ?
? 京东商城uni-app之自定义搜索组件（上） ?
? 京东商城uni-app之自定义搜索组件（中） ?

• 姊妹篇 【小程序项目开发 – 京东商城】uni-app 商品分类页面（上）

文章目录

• 一、渲染右侧二级和三级分类
• • 1.1 动态渲染二级分类页面
• 二、渲染二级分类UI结构
• 三、渲染三级分类UI结构
• 四、切换一级分类重置滚动条位置
• 五、点击三级分类跳转到商品页面
• 六、分支的提交和合并

一、渲染右侧二级和三级分类

在上文 【小程序项目开发 – 京东商城】uni-app 商品分类页面（上）5.1 章节接口数据格式可以看到，我们的数据，在一级分类下，存贮了二级分类，二级分类又存贮了三级分类，嵌套存贮。

1.1 动态渲染二级分类页面

• 在data节点定义数据cateList2

  data() {
    return {
      //当前设备可用高度
      windowHeight: '',
      // 分类页数据
      cateList: [],
      // active 索引判断
      active: 0,
      // 二级分类数据
      cateList2: [],
    };
  },
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

• 请求数据时在函数getCateList为其赋值（默认为第一个数据，动态数据变化在active

    async getCateList() { // async 异步不能使用箭头函数
      const {
        data: res
      } = await uni.$http.get('/api/public/v1/categories')
      // 判断是否赋值成功
      if (res.meta.status != 200) return uni.$showMsg()
      // 一级分类赋值 
      this.cateList = res.message
      // 二级分类赋值
      this.cateList2 = this.cateList[0].children
    }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

• 在active激活项函数activeTap也对其进行动态数据绑定

  methods: {
  // 触击事件绑定
  activeTap(options) {
  // 传参方法一：
  // this.active = options.target.dataset.active
  // 传参方法二
  this.active = options
  // 动态修改二级列表
  this.cateList2 = this.cateList[options].children
  },

效果：

二、渲染二级分类UI结构

• 结构

  
    
      
        
      {{'/ ' + item.cat_name + ' /'}}           {item.cat_name}} / -->
      
      
        
          
            
          
        
      
      
    
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

• 样式

  .cate-level2-title {
  font-weight: 700;
  padding: 2px;
  font-size: 14px;
  }

效果：

三、渲染三级分类UI结构

注意：在样式image组件的属性mode尽量不要使用，样式会很难调整

• 结构

    
      
        
        {{'/ ' + item.cat_name + ' /'}} {item.cat_name}} / -->
        
        
          
          
            
            
            
            {{prd.cat_name}}
          
        
      
    
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

• 样式

  .scroll-view-right {

  background-color: #fff;
  
  .cate-level2-title {
    font-weight: 700;
    padding: 2px;
    font-size: 14px;
    text-align: center;
  }
  1
  2
  3
  4
  5
  6
  7
  8

  }

  .cate-level2 {
  padding: 10rpx;
  padding-bottom: 20rpx;
  }

  // 三级分类样式
  .cate-level3-list {
  display: flex;
  // 允许自动换行
  flex-wrap: wrap;

  .cate-level3-list-item {
    // 整体三分之一
    width: 33.33%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    justify-content: space-around;
    align-items: center;
  
    image {
      width: 160rpx;
      height: 160rpx;
      margin-bottom: 5rpx;
    }
  
    text {
      font-size: 25rpx;
    }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

  }

效果：

四、切换一级分类重置滚动条位置

• 在data节点定义数据scrollTop

注意：对scrollTop 赋值前后值不变情况 下会没有效果，如果默认值为0，函数动态赋值也为0，那么组件就会默认为0，视为没有变化，这里解决方法是在0，1变化（1像素默认其为顶部，一点点偏差用户看不出来的??）

data() {
      return {
        //当前设备可用高度
        windowHeight: '',
        // 分类页数据
        cateList: [],
        // active 索引判断
        active: 0,
        // 二级分类数据
        cateList2: [],
        // 滚动条位置 
        scrollTop: 1 
      };
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 为scroll-view动态绑定scroll-top属性值

• 切换一级分类，动态设置scrollTop

  // 触击事件绑定
  activeTap(options) {
  // 传参方法一：
  // this.active = options.target.dataset.active
  // 传参方法二
  this.active = options
  // 动态修改二级列表
  this.cateList2 = this.cateList[options].children
  // 重置滚动条位置 动态变化
  this.scrollTop = this.scrollTop === 0 ? 1 : 0
  },

五、点击三级分类跳转到商品页面

• 绑定事件函数

• 定义函数跳转页面，并传参数 商品id

  gotoGoodsList: prd => {
  uni.navigateTo({
  url: ‘/subpackages/goods_list/goods_list?cat_id=’ + prd.cat_id
  })

效果：

六、分支的提交和合并

• git status 注释：查看当前文件状态
• git add . 注释： 提交所有文件到暂存区
• git commit -m "完成分类页面的开发" 注释：提交到本地仓库
• git push -u origin cate 注释：提交到远程仓库的cate分支
• git branch 注释：查看当前分支
• git checkout master 注释：切换到主分支
• git merge cate 注释：合并cate分支
• git push 注释：上传主分支到远程仓库
• git branch -d cate 注释：本地cate分支

  ?谢谢你的阅读，您的点赞和收藏就是我创造的最大动力！?
1

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦