优秀的编程知识分享平台

网站首页 > 技术文章 正文

6、类京东商城小程序_商品分类页面

nanyue 2024-08-01 22:59:46 技术文章 8 ℃

文章目录

一、新建cate分支（选读*）

二、添加编译模式

三、渲染页面基本结构

四、API获取手机型号等数据

五、美化item项

六、获取分类页面数据

七、动态渲染一级分类页面结构

八、渲染二级分类UI结构

九、渲染三级分类UI结构

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

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

十二、分支的提交和合并

一、新建cate分支（选读*）

之所以为了创建分支，也是养成良好的项目开发习惯，这样在开放项目井井有条
也可以跳过本节内容，不影响阅读观感

在根目录下，右键打开bash
基于 master 分支在本地创建 cate 子分支，用来开发和 cate 相关的功能：

  • 创建新分支cate且跳转到该分支
git checkout -b cate
1

查看分支（前面有*代表着当前分支）

git branch
1

二、添加编译模式

由于我们要开发的是cate 页面，所以我们将小程序编译模式修改启动页面 在cate，这样就不用每次都需要点击跳转了

三、渲染页面基本结构

  • 生成基本的滑动页面结构
<template>
  <view>
    <!-- 包裹容器 -->
    <view class="scroll-view-container">
      <!-- 左侧container -->
      <scroll-view class="scroll-view-left" scroll-y="true" style="height: 300px;">
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
      </scroll-view>
      <!-- 右侧container -->
      <scroll-view scroll-y="true" class="scroll-view-right" style="height: 300px;">
        <view></view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
        <view>xxx</view>
      </scroll-view>
    </view>
  </view>
</template>


<style lang="scss">
  .scroll-view-container {
    display: flex;
  }

  .scroll-view-left {
    width: 200rpx;
  }

  .scroll-view-right {}
</style>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667

效果：

三、API获取手机型号等数据

  • 我们需要将整个scroll-view 的高度和手机屏幕高度一样，我们可以调用APIuni.getSystemSync(),得到该手机设备的信息（如手机型号，可用高度）

    注意：是可使用的窗口高度，而不是屏幕高度（不包括navigationbar和tarbar）

在onLoad()生命周期函数调用API ，并在data节点定义数据，将可用窗口高度对其赋值给windowHeight

<script>
  export default {
    data() {
      return {
        //当前设备可用高度
        windowHeight: ''
      };
    },
    onLoad() {
      const {
        windowHeight: infoSys
      } = uni.getSystemInfoSync()
      this.windowHeight = infoSys
    }
  }
123456789101112131415

标签样式动态绑定

:style="{height: windowHeight + 'px'}"
1

效果：

四、美化item项

  • 方法一（不建议）：

为每一个item项加上类选择器
鼠标选择标签，CTRL + D选择全部（新版本是CTRL + E)，如



在对该类选择器 修改样式

  • 方法二（建议）
    使用后代选择器，在    .scroll-view-right view{} 修改样式

添加激活项样式&.active(用于配置选中时的样式）

样式

 .scroll-view-left view {
  text-align: center;
  line-height: 120rpx;
  background-color: lemonchiffon;
  font-size: 12px;
  // 激活项样式 后代选择器覆盖类选择器
  // &选择器覆盖 所在选择器
  &.active {
    background-color: lawngreen;
    // 相对定位 不改变文档布局移动
    position: relative;
    // 设置第一个元素
    &::before {
      // 内容为 一个空格
      content: ' ';
      //  块级元素
      display: block;
      background-color: #a00000;
      height: 60rpx;
      width: 6rpx;
      // 绝对定位 移出正常文档流
      position: absolute;
      // 最左侧
      top: 25%;
      left: 0;
    }
  }
 }
  .scroll-view-right view{
    text-align: center;
    line-height: 80rpx;
    background-color: aquamarine;
  }
123456789101112131415161718192021222324252627282930313233

激活项

<view class="active">xxx</view>
1

效果：

五、获取分类页面数据

  • data定义数据
<script>
  export default {
    data() {
      return {
        //当前设备可用高度
        windowHeight: '',
        // 分类页数据
        cateList: []
      };
    },
    ```
1234567891011
  • onLoad生命周期函数调用 函数获取数据
...
onLoad() {
      // 调取手机高度数据
      const {
        windowHeight: infoSys
      } = uni.getSystemInfoSync()
      this.windowHeight = infoSys
      // 调取分类数据
      this.getCateList()
    },
    ...
1234567891011
  • method定义 获取函数
  ...
 methods: {
      // 获取分类数据
      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
      }
    }
  }
</script>
12345678910111213

获取成功

5.1 接口数据样式

{
    "message": [
        {
            "cat_id": 1,
            "cat_name": "大家电",
            "cat_pid": 0,
            "cat_level": 0,
            "cat_deleted": false,
            "cat_icon": "",
            "children": [
                {
                    "cat_id": 3,
                    "cat_name": "电视",
                    "cat_pid": 1,
                    "cat_level": 1,
                    "cat_deleted": false,
                    "cat_icon": "",
                    "children": [
                    {
                        "cat_id": 5,
                        "cat_name": "曲面电视",
                        "cat_pid": 3,
                        "cat_level": 2,
                        "cat_deleted": false,
                        "cat_icon": "full/2fb113b32f7a2b161f5ee4096c319afedc3fd5a1.jpg"
                    }]
                }
            ]
        }
    ],
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}
1234567891011121314151617181920212223242526272829303132333435

六、动态渲染一级分类页面结构

激活项active实现思路：

在data节点定义数据active,对分类动态循环生成的索引与之比较，相同则在对应索引加上类active,并对分类点击帮绑定事件处理函数并对其传索引参数，动态修改active,如下

  • 方法一：
    组件传参
<template>
  <view>
    <!-- 包裹容器 -->
    <view class="scroll-view-container">
      <!-- 左侧container -->
      <scroll-view class="scroll-view-left" scroll-y="true" :style="{height: windowHeight + 'px'}">
        <!-- 判断是否选中-active -->
        <block v-for="(item,index) in cateList" v-bind:key="index">
          <!-- 传参方法一 -->
          <view v-bind:class="(active === index ?'active' : '')" v-on:click="activeTap" :data-active=index>{{item.cat_name}}</view>
        </block>
        
      </scroll-view>
      <!-- 右侧container -->
      <scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}">
        <view>xxx</view>
      </scroll-view>
    </view>
  </view>
</template>


//函数

// 触击事件绑定
 activeTap(options){
   this.active = options.target.dataset.active
 },
12345678910111213141516171819202122232425262728
  • 方法二：
    注意：绑定函数直接传参，这在    原生小程序是不允许的，原生小程序中会把整体当成函数
  <template>
    <view>
      <!-- 包裹容器 -->
      <view class="scroll-view-container">
        <!-- 左侧container -->
        <scroll-view class="scroll-view-left" scroll-y="true" :style="{height: windowHeight + 'px'}">
          <!-- 判断是否选中-active -->
          <block v-for="(item,index) in cateList" v-bind:key="index">
            <!-- 传参方法二 函数直接传参 这在原生小程序是不可以的 -->
            <!-- <view v-bind:class="(active === index ?'active' : '')" v-on:click="activeTap(index)" >{{item.cat_name}}</view> -->
          </block>
          
        </scroll-view>
        <!-- 右侧container -->
        <scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}">
          <view>xxx</view>
        </scroll-view>
      </view>
    </view>
  </template>


// 函数
// 触击事件绑定
  activeTap(options){
    // this.active = options.target.dataset.active
    this.active = options
  },
12345678910111213141516171819202122232425262728

效果：

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

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

1.1 动态渲染二级分类页面

  • 在data节点定义数据cateList2
    data() {
      return {
        //当前设备可用高度
        windowHeight: '',
        // 分类页数据
        cateList: [],
        // active 索引判断
        active: 0,
        // 二级分类数据
        cateList2: [],
      };
    },
123456789101112
  • 请求数据时在函数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
      }
    }
123456789101112
  • 在active激活项函数activeTap也对其进行动态数据绑定
methods: {
      // 触击事件绑定
      activeTap(options) {
        // 传参方法一：
        // this.active = options.target.dataset.active
        // 传参方法二
        this.active = options
        // 动态修改二级列表
        this.cateList2 = this.cateList[options].children
      },
12345678910

效果：

八、渲染二级分类UI结构

  • 结构
    <!-- 右侧container -->
      <scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}">
        <view class="cate-level2" v-for="(item,index) in cateList2" v-bind:key="index">
          <!-- 标题 -->
        <view class="cate-level2-title">{{'/ ' + item.cat_name + ' /'}}</view>           <!-- / {{item.cat_name}} / -->
        <!-- 项目容器 -->
        <view>
          <view class="cate-level2-list" v-for="(prd,prdindex) in item.children" v-bind:key="prdindex">
            <view class="cate-level2-prd">
              <image v-bind:src="prd.cat_icon" mode="widthFix"></image>
            </view>
          </view>
        </view>
        </view>
      </scroll-view>
123456789101112131415
  • 样式
  .cate-level2-title {
    font-weight: 700;
    padding: 2px;
    font-size: 14px;
  }
12345

效果：

九、渲染三级分类UI结构

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

  • 结构
  <!-- 右侧container -->
      <scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}">
        <view class="cate-level2" v-for="(item,i2) in cateList2" v-bind:key="i2">
          <!-- 二级分类项目标题 -->
          <view class="cate-level2-title">{{'/ ' + item.cat_name + ' /'}}</view> <!-- / {{item.cat_name}} / -->
          <!-- 三级分类列表 -->
          <view class="cate-level3-list">
            <!-- 三级分类的item项 -->
            <view class="cate-level3-list-item" v-for="(prd,i3) in item.children" v-bind:key="i3">
              <!-- 三级分类项目的图片 -->
              <image v-bind:src="prd.cat_icon"></image>
              <!-- 三级分类项目的文本 -->
              <text>{{prd.cat_name}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
1234567891011121314151617
  • 样式

  .scroll-view-right {

    background-color: #fff;

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

  }

  .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;
      }
    }

  }
12345678910111213141516171819202122232425262728293031323334353637383940414243444546

效果：

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

  • 在data节点定义数据scrollTop

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

data() {
      return {
        //当前设备可用高度
        windowHeight: '',
        // 分类页数据
        cateList: [],
        // active 索引判断
        active: 0,
        // 二级分类数据
        cateList2: [],
        // 滚动条位置 
        scrollTop: 1 
      };
    },
1234567891011121314
  • 为scroll-view动态绑定scroll-top属性值
 <!-- 右侧container -->
 <scroll-view scroll-y="true" class="scroll-view-right" :style="{height: windowHeight + 'px'}" v-bind:scroll-top="scrollTop">
12
  • 切换一级分类，动态设置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
 },
1234567891011

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

  • 绑定事件函数
<!-- 三级分类的item项 -->
<view class="cate-level3-list-item" v-for="(prd,i3) in item.children" v-bind:key="i3" v-on:click="gotoGoodsList(prd)">
12
  • 定义函数跳转页面，并传参数 商品id
gotoGoodsList: prd => {
    uni.navigateTo({
      url: '/subpackages/goods_list/goods_list?cat_id=' + prd.cat_id
    })
1234

效果：

十二、分支的提交和合并

  • 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分支

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

Tags：

猜你喜欢

最近发表
标签列表