如何完成小兔鲜小程序推荐页面的开发逻辑

1. 获取页面参数 type ：这里使用 defineProps 来完成，使用 defineProps 函数来定义一个 query 对象，并定该对象具有一个 type 属性，类型为 string。
2. 获取当前的推荐信息：在hotMap数组中查找与query.type相匹配的元素，并将结果赋值给currHot变量
3. 动态设置标题--使用非空断言操作符“！”，表示确保currHot不为空或者undefined，以避免出现错误
4. 设置用于保存高亮active的选项下标

如何使页面的active下标随着我们的点击不同的页面而改变呢？

解决办法：

        在css中添加两个属性：

        1.判断，判断当前页面是否为activeindex

                 :class="{ active: index === activeIndex }"

        2. 赋值（点击某个index后使当前页面变成activeindex       

                @tap="activeIndex = index"

        

1. 调用API进行传参，定义一个函数：getHotRecommendAPI 方法接受两个参数：currHot!.url 和一个包含请求参数的对象。其中，currHot!.url 是一个字符串类型的参数，表示当前选项的 URL 地址。currsubTypes.id、currsubTypes.goodsItems.page 和 currsubTypes.goodsItems.pageSize 是从 currsubTypes 对象中获取的参数，分别表示当前选项的 ID、页码和每页数据量。

定义一个异步函数，获取热门推荐数据，见过封面和列表分别封装

  // 1.保存封面
  bannerPicture.value = res.result.bannerPicture
  // 2.保存列表
  subTypes.value = res.result.subTypes

如何保证切换不同的index时，页面展示相对应的列表数据呢？

解决办法：

通过遍历subtype提取出item与index，并利用v-show去展示当前选中的index的列表。

滚动触底业务---@scrolltolower="onScrolltolower"

先获取当前的选项:activeindex：

const currsubTypes = subTypes.value[activeIndex.value]

然后进行当前选项页码累加：

currsubTypes.goodsItems.page++

然后通过API传参，获取数据subType[],page,pageSize.

  const res = await getHotRecommendAPI(currHot!.url, {
    subType: currsubTypes.id,
    page: currsubTypes.goodsItems.page,
    pageSize: currsubTypes.goodsItems.pageSize,
  })

注意：传入currsubTypes.id可以使需要渲染的列表才读取（2选1）

然后，将新获取的数据追加到列表中

  // 新的列表选项
  const newsubTypes = res.result.subTypes[activeIndex.value]

subTypes[activeIndex.value]：根据subtypes中的下标获取对应的数据

最后进行数组追加：

  // 数组追加
  currsubTypes.goodsItems.items.push(...newsubTypes.goodsItems.items)

一个数组追加到另外一个数组需要使用”...“来进行展开

给热门推荐提供分页条件：

在原本的页码累计之前加上一个条件，条件是当前选项数据是否还有下一页，让当前页码跟页码总数进行比较。

        当前页码 --- page

·       页总数 --- pages

分页条件 --- currsubTypes.goodsItems.page < currsubTypes.goodsItems.pages

如果小于---页码累加

如果不小于---返回信息： return uni.showToast({ icon: 'none', title: '没有更多数据了~' })

如何标记已结束呢？

    // 标记已结束
    currsubTypes.finish = true

注意，需要给finish加上类型，不然会报错。

综上，我们就完成了小兔鲜小程序推荐页面的开发逻辑！