小程序分类页面的实现

2024-02-22 小程序 0

小程序任务详述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()方法中，点击的时候，给该字段赋值数据

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

在父组件中将数据传递进去
<goods-pop skuCurGoodsBaseInfo="{{ skuCurGoods }}" />
在子组件中定义properties字段，并声明需要接收的属性

逻辑③实现：监听传过来的数据，并调用规格数据的接口

监听数据：

if数据不存在的情况，不需要往下执行了，return

if库存<=0的情况，也不需要往下执行了，return

if数据存在且库存足够的情况，则可以继续往下执行：

掉接口获取规格数据

将请求规格数据封装成一个方法：在弹窗组件中通过methods来声明方法

然后在监听中继续，调用这个方法，并将数据传递进去（此参数是用来获取商品id的）

在api中定义接口（需要传递id参数）

在弹窗组件中先引入这个接口

然后再弹窗组件中，调用接口并将数据id传递进去

逻辑④实现：在弹窗展示规格数据

弹窗组件中：

在initGoodsData()方法中，获取规格数据

data中设置初始值，将show字段值设为true

页面中使用数据：

渲染规格：

规格名称和具体规格不再同一层，所以需要进行一个逻辑上的处理

外面一个循环，里面再套一个循环，因为内外层的id是一样的，所以可以为第二层的id起个别名

wx:for - item = "small"指当前元素的别名small，

wx:for - index = "idx" 索引别名idx

规格逻辑：

①显示效果：选中的有高亮效果

②当第一层的规格进行切换的时候，下面的规格会清空

③点击加入购物车时，需要对点击的数据进行获取

④ 购买数量

逻辑①实现：高亮

绑定点击事件:skuSelect

需要知道当前选中的是哪一个规格

通过自定义属性来获取外层和内层的索引data - propertyindex和...

skuSelect()中：

先拿到当前规格的数据

需要通过一个字段进行显示，而原有数据中没有这样的字段，所以需要手动给当前的数据添加这样的字段，即需要修改原数据的

不能直接修改原数据：需要对原数据进行深拷贝

拿到索引

通过索引拿到两层的数据，log进行验证

子层级：遍历修改active属性值为false

父层级：处理选中状态

处理完之后，将当前数据进行更新

在页面中，通过样式进行控制