小程序分类页面的实现

小程序 任务详述2：

参与订单流程开发

1.负责 商品分类展示

左侧tab区域

页面样式实现：

外层：小程序滚动容器scroll-view标签，添加属性：滚动方向、属性custom-class添加自定义属性

内层：Vant组件库的Sidebar侧边导航组件

activeKey默认为0，代表选中第一个tab选项

前后端联调拿数据：

在api中定义接口

数据格式

在category.js中引入接口

①当点击分类页面 显示商品的时候，需要去调用接口 加载数据

② 还有就是点击首页金刚区分类的某个板块时，会跳转到分类页面相应的分类

所以以上两种情况的数据加载，需要在两个生命周期中进行

① onLoad()生命周期，是页面首次加载完成之后调用

② onShow()生命周期，是指当前页面被激活的时候调用

• 第一种情况：页面在页面栈中是已经存在的，当A页面跳转到B时，不会触发onLoad()，而会去触发onShow()
• 第二种情况：当小程序进入到后台的时候，也就是点击手机的home键进入手机后台，那么当小程序下一次被激活时，就会被调用

  为请求接口的逻辑定义一个方法categotys()

  在请求数据的前 添加loading效果，请求后关闭 loading效果

   

  在onLoad()函数中调用 打印出来数据

  数据处理显示逻辑：

  在请求接口的逻辑方法categotys()中：

  先将菜单数组: res.data存储在变量categories里

  ①菜单逻辑处理：有两种情况，一种是有子菜单，一种是没有子菜单。

  如果有子菜单，返回的字段level：“1”，所以需要采用filter方法对level为1的数据进行过滤

  过滤的一级菜单的结果，存储在变量firstCategory中

  ② 两种状态的逻辑处理

  • 状态一：从外部金刚区分类点击进来，高亮的是对应 指定的tab标签
  • 状态二：点击底部分类进来，默认第一个tab标签显示高亮

    data中定义一个数据categorySelected，用于存储当前所显示的tab页签id

    状态实现：

    总逻辑：

    ①从Storage中获取金刚区点击分类的id

    ② 将这个金刚区id存储在data中，和分类页面联系起来

    ③ 获取两个id相同的数据，就是选中元素的索引

    ④ 根据索引获取选中的元素

    金刚区点击某个分类跳转方法tabClick()实现

    点击某一个分类时，如何在两个不一样的界面传递消息？

    利用的是缓存wx.setStorageSync()，将点击分类的category.id缓存到了Storage里面

    然后跳转到分类页面的时候，分类页面通过拿到category.id，就能在分类页面知道 在金刚区选中的分类了，从而将该分类进行高亮显示。

    {

           在页面跳转的时候，来获取Storage中的分类id

    然后拿到之后，缓存就没用了，一定要清除缓存，否则会有bug的

    判断分类id是否存在，如果存在，将其赋值给data中定义的categorySelected.id(注意：这个数据因为不用做响应式，所以不需要调用setData()方法)

    拿到id了，再调用一次categotys()方法，来获取tab页签数据

    }

    在categotys()方法中 通过这个选中分类id来定位到当前的tab页签，

    如果选中分类id存在的话

    {

    某个页签的选中状态是通过activeKey属性值来指定的，值为页签元素的索引，对应位置的页签就会显示高亮

    所以需要找到当前tab页签的索引

    使用findIndex()返回分类id和选中id一样的索引，并保存到将变量activeCategory中

    将选中分类的id赋值给data中的数据，

    如果是直接进入分类页面，直接赋值即可

    }

    进行页面响应显示：

    将数据通过setData()存储起来，并定义初始值

    然后就可以处理页面上的显示逻辑了

    显示效果：

    右侧商品展示

    点击分类，tab页签高亮显示：

    给tab页签设置 点击事件onCategory

    当点击时，需要拿到当前分类的id，如何拿到id?

    给标签添加自定义属性:data-id、data-index来拿到当前data数据的id和index，绑定到点击事件e里面

    将index的值解构出来，是点击页签的index，有了index就知道点击的是哪个分类了

    然后更新页面的数据：可实现点击某个分类，并高亮显示的效果

    activeCategory是当前元素的索引

    因为很多地方都需要请求商品数据，所以使用一个方法goodList()以便复用

    点击某个分类，展示对应数据

    数据是滚动效果

    滚动到底部时有一个分页展示的效果

    商品右下角有 加号和购物车 两种符号 ：

    ① 是加号时，表示该商品存在sku的情况，需要用户去选择不同商品不同的规格。选择之后，再添加到购物车

    ② 如果该商品不用选择规格，则点击购物车图标，直接将商品添加到购物车

    切换类目时，会加载指定的类目商品

    点击tab页签获取商品列表实现：

     

    api接口

    在调用接口的时候，需要对传入的参数进行处理：

    在data中初始化page和pageSize

    通过选中的类目categorySelected，来获取该类目的id，解构出来id，并起个别名，通过id来获取商品列表

    调用接口，并处理参数

    获取到数据之后，将数据设置到setData()上的变量currentGoods，用来页面的渲染

    加上页码进行优化：

    如果当前数据是第一页时，就直接获取商品数据

    如果不是第一页的时候，需要将之前请求的数据 和 当前请求的数据进行合并

    （数组的合并使用concat）

    这里写了两个setData()，可以进行一个优化

    声明upData

    将setData里的数据赋值给upData

    渲染页面：

    页面编写：滚动容器、小程序滚动触底事件bindscrolltolower绑定方法goodsBottom()、UI卡片

    点击商品会跳转到详情页面，需要给一个跳转链接，这个商品会有不同的类别，跳转的时候，需要根据类别，做不同的逻辑处理

    跳转时需要根据后端返回的字段，做一个跳转逻辑的区分

    需要使用wxs语法定义

    定义完之后，在页面调用

    商品列表显示

    商品列表触底分页实现：

    商品列表触底时，会触发goodsBottom()，让页码+1

    注意：需要请求商品列表的地方：

    ① 页面首次加载的时候，需要请求商品列表（在类目数据处理完之后进行调用）

    ② 在点击类目的时候，也需要请求商品数据

    ③ 在商品滚动到底部的时候，分页之后还要再请求商品列表数据

    切换tab页签，对应商品列表发生变化

    点击tab时，page要重置为1

    如果code === 700，表示当前列表没有商品数据

    第一页就是空数组

    第二页就是：没有更多了

    商品sku交互：加号和购物车 选项逻辑实现

    显示+号 还是 购物车

    页面布局：将加号和购物车图标加上

    逻辑判断实现：根据后端返回的字段进行判断，如果那两个字段为true的话，显示+号，说明当前商品是存在规格的；否则不显示加号，显示购物车图标

    点击加号图标逻辑：

    逻辑：

    • ① 触发点击事件方法addShopcar()，获取当前点击的商品数据
    • ② 将数据传递到子组件里面（通过父子通信的方式传递数据）
    • ③ 在子组件中监听传递过来的数据，需要判断当前商品是否存在，是否有库存，如果没有问题，就去调用商品规格接口，来获取规格数据
    • ④将规格数据展示在弹窗里

      逻辑①实现：

       首先：这两个按钮绑定同一个点击事件addShopcar

      自定义属性，将商品id传递进点击事件里面，从而拿到商品数据currentGood

      addShopCar(e) {    console.log('target',e);    // 你要将这个商品加入购物车，肯定是要找到这个商品的，如何找到？通过页面传入的id来找，并保存在一个变量里// ① 将e中的id解构出来// ② 在商品中通过id 找到当前商品// ③ 打印看是否获取到了当前的商品  const { id } = e.currentTarget.dataset  const curGood= this.data.currentGoods.find(ele => {    return ele.id == id  })  console.log('点击加号或购物车获取的商品', curGood);//获取点击商品成功

      子组件sku弹窗的实现：

      封装成组件

      1. 创建弹窗组件goods-pop

      2. 在app.json中引入组件

      3. 弹窗页面布局

      使用Vant库中的基础组件Popup 弹出层组件

      注意：需要使用双标签，因为所定义的内容需要使用插槽的形式来确定

      复制前别忘记引入UI组件

      该弹窗组件的显示与隐藏，是通过show来控制的

      4. 在父组件使用弹窗组件

       

      逻辑②实现：父子通信的方式传递数据

      当点击加号的时候会显示弹窗，所以这个控制显示还是隐藏的字段是由父组件的字段来定义的。

      获取到数据之后保存到data中，然后传给子组件

      在父组件中的data中定义初始值

      在addShopcar()方法中，点击的时候，给该字段赋值数据

      然后将数据传递给弹窗（父子组件之间的通信）步骤：

      • 在父组件中将数据传递进去