黑马 小兔鲜儿 uniapp 小程序开发- 推荐模块- day03

黑马 小兔鲜儿 uniapp 小程序开发- 02首页模块_软工菜鸡的博客-CSDN博客​​​​​​

本课程是全网首套用 vue3 加 TS 写的 uniapp 项目， 里面大量封装自己的组件库，课程从 uni-app 基础入手，按照9大电商业务模块逐步实现完整的电商购物流程业务；涵盖了猜你喜欢、热门推荐、商品分类、商品详情、微信登录、用户管理、地址管理、购物车管理、订单管理等功能。包含微信登录，微信支付等业务。一套代码多端全面覆盖微信小程序端、H5端、APP端。

学完本课程能够收获：使用 uni-app + Vue3 开发中型项目的能力

小兔鲜儿 - 推荐模块- day03

主要实现 Tabs 交互、多 Tabs 列表分页加载数据。

动态获取数据

参考效果

推荐模块的布局结构是相同的，因此我们可以复用相同的页面及交互，只是所展示的数据不同。

静态结构

新建热门推荐页面文件，并在 pages.json 中添加路由（VS Code 插件自动完成）。

// /src/pages/hot/hot.vue

获取页面参数

热门推荐页要根据页面参数区分需要获取的是哪种类型的推荐列表，然后再去调用相应的接口，来获取不同的数据，再渲染到页面当中。

项目首页（传递参数）

// src/pages/index/components/HotPanel.vue

  …省略  

热门推荐页（获取参数）

// src/pages/hot/hot.vue

传递不同的页面参数，动态设置推荐页标题。

获取数据

地址参数

不同类型的推荐，需要调用不同的 API 接口：

type	推荐类型	接口路径
1	特惠推荐	/hot/preference
2	爆款推荐	/hot/inVogue
3	一站买全	/hot/oneStop
4	新鲜好物	/hot/new

接口调用

调用接口获取推荐商品列表的数据，然后再将这些数据渲染出来。

接口地址：见上表

请求方式：GET

请求参数：

Query:

字段名称	是否必须	默认值	备注
subType	否	无	推荐列表 Tab 项的 id
page	否	1	页码
pageSize	否	10	每页商品数量

请求封装

经过分析，尽管不同类型推荐的请求 url 不同，但请求参数及响应格式都具有一致性，因此可以将接口的调用进行封装，参考代码如下所示：

import { http } from '@/utils/http'
import type { PageParams } from '@/types/global'

type HotParams = PageParams & {
  /** Tab 项的 id，默认查询全部 Tab 项的第 1 页数据 */
  subType?: string
}
/**
 * 通用热门推荐类型
 * @param url 请求地址
 * @param data 请求参数
 */
export const getHotRecommendAPI = (url: string, data?: HotParams) => {
  return http({
    method: 'GET',
    url,
    data,
  })
}

类型声明

电商项目较为常见商品展示，商品的类型是可复用的，封装到 src/types/global.d.ts 文件中：

// src/types/global.d.ts
/** 通用商品类型 */
export type GoodsItem = {
  /** 商品描述 */
  desc: string
  /** 商品折扣 */
  discount: number
  /** id */
  id: string
  /** 商品名称 */
  name: string
  /** 商品已下单数量 */
  orderNum: number
  /** 商品图片 */
  picture: string
  /** 商品价格 */
  price: number
}

其实猜你喜欢的商品类型也相同，可复用通用商品类型，封装到 src/services/home.ts 文件中：

// src/services/home.ts
import type { GoodsItem } from '@/types/global'

// GuessItem 和 GoodsItem 类型相同
export type GuessItem = GoodsItem

热门推荐类型如下，新建 src/types/hot.d.ts 文件：

import type { PageResult, GoodsItem } from './global'

/** 热门推荐 */
export type HotResult = {
  /** id信息 */
  id: string
  /** 活动图片 */
  bannerPicture: string
  /** 活动标题 */
  title: string
  /** 子类选项 */
  subTypes: SubTypeItem[]
}

/** 热门推荐-子类选项 */
export type SubTypeItem = {
  /** 子类id */
  id: string
  /** 子类标题 */
  title: string
  /** 子类对应的商品集合 */
  goodsItems: PageResult
}

最后，把获取到的数据结合模板语法渲染到页面中。

多 Tabs 分页加载

需要根据当前用户选中的 Tabs 加载对应的列表数据。

Tabs 交互基础

当用户点击页面中的 Tab 后，切换展示相应的商品列表，功能相对简单，快速实现即可。

参考代码

加载选中 Tabs 分页数据

根据当前用户选中的 Tabs 加载对应的列表数据。

操作流程

1. 根据高亮下标，获取对应列表数据
2. 提取列表的分页参数，用于发送请求
3. 滚动触底事件，页码累加，数组追加，退出判断等业务和常规分页基本一致

参考代码(总)

热门推荐页

---