uniapp项目之小兔鲜儿小程序商城(三) 热门推荐页的实现,商品分类页的实现

已于 2025-06-19 10:50:04 修改
阅读量752 收藏 26
点赞数 18
CC 4.0 BY-SA版权
文章标签： uni-app 小程序 Vue3 uni-ui 微信小程序
于 2025-06-18 18:52:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/rowlet/article/details/148746609

文章目录

一.热门推荐页Hot.vue

在首页中的热门推荐功能区域<HotPanel />点击时,会跳转到真正的热门推荐页hot.vue
在首页中有四个跳转方案:特惠推荐,爆款推荐,一站买全,新鲜好物
但是只要做一个热门推荐页来复用就够了,因为它们之间的结构和样式都是相同的,只有展示的数据不同

1.实现静态布局和查询参数路由跳转

在这里插入图片描述

1.1.新建hot页

新建uniapp页面>hot 热门推荐
粘贴静态页面结构代码如下:

// src/pages/hot/hot.vue

<script setup lang="ts">
// 热门推荐页 标题和url
const hotMap = [
  { type: '1', title: '特惠推荐', url: '/hot/preference' },
  { type: '2', title: '爆款推荐', url: '/hot/inVogue' },
  { type: '3', title: '一站买全', url: '/hot/oneStop' },
  { type: '4', title: '新鲜好物', url: '/hot/new' },
]
</script>
<template>
  <view class="viewport">
    <!-- 推荐封面图 -->
    <view class="cover">
      <image
        src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-20/84abb5b1-8344-49ae-afc1-9cb932f3d593.jpg"
      ></image>
    </view>
    <!-- 推荐选项 -->
    <view class="tabs">
      <text class="text active">抢先尝鲜</text>
      <text class="text">新品预告</text>
    </view>
    <!-- 推荐列表 -->
    <scroll-view scroll-y class="scroll-view">
      <view class="goods">
        <navigator
          hover-class="none"
          class="navigator"
          v-for="goods in 10"
          :key="goods"
          :url="`/pages/goods/goods?id=`"
        >
          <image
            class="thumb"
            src="https://yanxuan-item.nosdn.127.net/5e7864647286c7447eeee7f0025f8c11.png"
          ></image>
          <view class="name ellipsis">不含酒精，使用安心爽肤清洁湿巾</view>
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">29.90</text>
          </view>
        </navigator>
      </view>
      <view class="loading-text">正在加载...</view>
    </scroll-view>
  </view>
</template>
<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 180rpx 0 0;
  position: relative;
}
.cover {
  width: 750rpx;
  height: 225rpx;
  border-radius: 0 0 40rpx 40rpx;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
.scroll-view {
  flex: 1;
}
.tabs {
  display: flex;
  justify-content: space-evenly;
  height: 100rpx;
  line-height: 90rpx;
  margin: 0 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  background-color: #fff;
  position: relative;
  z-index: 9;
  .text {
    margin: 0 20rpx;
    position: relative;
  }
  .active {
    &::after {
      content: '';
      width: 40rpx;
      height: 4rpx;
      transform: translate(-50%);
      background-color: #27ba9b;
      position: absolute;
      left: 50%;
      bottom: 24rpx;
    }
  }
}
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx 20rpx;
  .navigator {
    width: 345rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }
  .thumb {
    width: 305rpx;
    height: 305rpx;
  }
  .name {
    height: 88rpx;
    font-size: 26rpx;
  }
  .price {
    line-height: 1;
    color: #cf4444;
    font-size: 30rpx;
  }
  .symbol {
    font-size: 70%;
  }
  .decimal {
    font-size: 70%;
  }
}
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0 50rpx;
}
</style>
1.2.查询参数传参并跳转
  • 首页-热门推荐子组件HotPanel.vue==>传参
    <view class="item" v-for="item in list" :key="item.id">
		......
      <navigator hover-class="none" :url="`/pages/hot/hot/?type=${item.type}`" class="cards">
  		......
      </navigator>
    </view>
  • 热门推荐页hot.vue==>接收参数
// 热门推荐页 标题和url
const hotMap = [
  { type: '1', title: '特惠推荐', url: '/hot/preference' },
  { type: '2', title: '爆款推荐', url: '/hot/inVogue' },
  { type: '3', title: '一站买全', url: '/hot/oneStop' },
  { type: '4', title: '新鲜好物', url: '/hot/new' },
]

// uniapp 获取页面参数
const query = defineProps<{
  type: string
}>()
// console.log(query)
// 当前推荐类型: 1 特惠推荐,2 爆款推荐,3 一站买全,4 新鲜好物 中的一个
const currHot = hotMap.find((v) => v.type === query.type)
// 动态设置标题
uni.setNavigationBarTitle({ title: currHot!.title })

疑问:hot.vue和hotPanel.vue并非父子组件关系,为何能用defineProps传值?

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

Query:
字段名称    是否必须    默认值    备注
subType    否    无    推荐列表  Tab 项的 id
page       否    1     页码
pageSize

观察接口文档,四个推荐分区的接口的请求方式和请求参数是一样的,除了请求路径有所区别,
考虑把四个接口封装成同一个通用接口

2.1.封装通用接口

新建services/hot.ts
使用到了两个类型声明变量,其中

  • HotParams是由PageParams(它声明过pageType和page)加上subType构成的
  • 而HotResult后续会实现
import { http } from '@/utils/http'
import type { PageParams } from '@/types/global'
import type { HotResult } from '@/types/hot'

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

currHot是当前推荐类型,即匹配到type时对应的hotMap数组的一个对象元素

//hot.vue

import { getHotRecommendAPI } from '@/services/hot'
//获取热门推荐数据
const getHotRecommendData=async()=>{
    const res=await getHotRecommendAPI(currHot!.url)//类型断言,确保currHot不为undefined
}
//页面初始化的时候调用
import {onload} from '@dcloudio/uni-app'
onLoad(()=>{
    getHotRecommendData()
})
3.类型定义
3.1.优化:商品类型GoodsItem可以直接由GuessItem赋值

商品类型GoodsItem是可复用的,粘贴在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
}
  • GuessItem和GoodsItem类型相同,可以通过赋值来优化
// src/services/home.ts
import type { GoodsItem } from '@/types/global'
// GuessItem 和 GoodsItem 类型相同
export type GuessItem = GoodsItem//把原先的代码删掉,改成由GoodsItem赋值就行了
3.2.把res.result的类型声明为HotResult

此时hot.vue中res.result的类型还没声明:unknown
如何声明热门推荐类型?

  • 新建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<GoodsItem>
}
  • 给res.result指定类型
import type {HotResult} from "@/types/hot"
export const getHotRecommendAPI = (url: string, data?: HotParams) => {
  return http<HotResult>({
    method: 'GET',
    url,
    data,
  })
}
4.页面渲染和Tab交互
4.1.推荐封面图的渲染
import { ref } from 'vue'
const bannerPicture = ref('')
//获取热门推荐数据
const getHotRecommendData = async () => {
  const res = await getHotRecommendAPI(currHot!.url)
  bannerPicture.value = res.result.bannerPicture//保存封面图
}

<!-- 推荐封面图 -->
<view class="cover">
  <image :src="bannerPicture"></image>
</view>
4.2.推荐选项的渲染

在这里插入图片描述

import type { SubTypeItem } from '@/types/hot'
const subTypes = ref<SubTypeItem[]>([])
//获取热门推荐数据
const getHotRecommendData = async () => {
  // 调用获取热门推荐API
  const res = await getHotRecommendAPI(currHot!.url)
  bannerPicture.value=res.result.bannerPicture//保存封面图
  subTypes.value = res.result.subTypes//保存列表
}

<!-- 推荐选项 -->
<view class="tabs">
   <text v-for="item in subTypes" :key="item.id" class="text">{{ item.title }}</text>
</view>

此时每个推荐选项都是高亮,优化如下:

const activeIndex=ref(0)// 当前激活的推荐选项索引

<!-- 推荐选项 -->
<view class="tabs">
  <text
    v-for="(item, index) in subTypes"
    :key="item.id"
    class="text"
    :class="{ active: index === activeIndex }"
    @tap="activeIndex = index"
    >{{ item.title }}</text
  >
</view>
4.3.列表的渲染
<!-- 推荐列表 -->
<scroll-view v-for="item in subTypes" :key="item.id" scroll-y class="scroll-view">
  <view class="goods">
    <navigator
      hover-class="none"
      class="navigator"
      v-for="goods in item.goodsItems.items"
      :key="goods.id"
      :url="`/pages/goods/goods?id=${goods.id}`"
    >
      <image class="thumb" :src="goods.picture"></image>
      <view class="name ellipsis">{{ goods.name }}</view>
      <view class="price">
        <text class="symbol">¥</text>
        <text class="number">{{ goods.price }}</text>
      </view>
    </navigator>
  </view>
  <view class="loading-text">正在加载...</view>
</scroll-view>

优化:列表数据只展示当前高亮tab对应的商品(v-show)

    <!-- 推荐列表 -->
    <scroll-view
         v-for="(item,index)in subTypes" 
        :key=item.id" scroll-y 
        v-show="activeIndex===index"
        class="scroll-view"
    >
         ...
    </scroll-view>
5.分页

回顾:

-什么时候会触发分页?
-滚动触底的时候

难点:
       选项1的列表滚动触底,应该加载分页1的第二页数据
       选项2的列表滚动触底,应该加载分页2的第二页数据
在这里插入图片描述

如何实现?
        五个步骤:滚动触底>获取当前选项>当前页码累加>调用api传参>当前数组追加

5.1.分页的加载
  • step1:滚动容器添加触底事件
@scrolltolower="onScrolltolower"
  • step2:获取当前选项
const onScrolltolower=async()=>{
    const currSubTypes==subTypes[activeIndex.value]//id,title,goodsItems
}
  • step3:当前页码累加
...
currSubTypes.goodsItems.page++
  • step4:调用api传参
...
//获取热门推荐的数据
const res=await getHotRecommendAPI(currHot.url,{
    subType:currSubTypes.id,
    page:currSubTypes.goodsItems.page,
    pageSize:currSubTypes.goodsItems.pageSize
})
  • step5:追加当前数组----currSubTypes.goodsItem.items数组
//新的列表选项==>这样做的目的是让列表选项相对独立互不影响
const newSubTypes=res.result.subTypes[activeIndex]
//数组追加
currSubTypes.goodsItem.items.push(...newSubTypes.goodsItems.items)

在这里插入图片描述

不断滚动不断追加,加载新的数据进入到items数组中

5.2.停止分页的条件

后端的商品数据是有限的,当加载完所有商品时应该关闭分页
关闭分页的条件:
     页码累加page++,直到
     页码page>页总数pages,此时设置finish变量作为结束标记

  • 分页条件
//分页条件:
if(currSubTypes.goodsItem.page<currSubTypes.goodsItem..pages){
    currSubTypes.goodsItem.page++
}else{//停止分页
    //标记:已结束----此时currSubTypes没有finish字段,需添加
    currSubTypes.finish=true
    return uni.showToast({icon:'none',title:'没有更多数据了~'})
}
  • 添加finish字段
//推荐选项
const subTypes=ref(<subTypesItem&{finish?:boolean})>([])
  • 修改触底文字
<view class="loading-text">正在加载...</view>
改成:
<view class="loading-text">{{item.finish?:"没有更多数据了~":"正在加载..."}}</view>
  • 调试小技巧:把初始页数设置为30,更快地翻完35页总页数,以触发结束分页的效果
import { getHotRecommendAPI } from '@/services/hot'
//获取热门推荐数据
const getHotRecommendData=async()=>{
    const res=await getHotRecommendAPI(currHot!.url)
    //如果是开发环境,page的值为30,否则是1
    page:import.meta.env.DEV?30:1,
    pageSize:10
}
6.完整代码
//hot.vue

<script setup lang="ts">
// 热门推荐页 标题和url
const hotMap = [
  { type: '1', title: '特惠推荐', url: '/hot/preference' },
  { type: '2', title: '爆款推荐', url: '/hot/inVogue' },
  { type: '3', title: '一站买全', url: '/hot/oneStop' },
  { type: '4', title: '新鲜好物', url: '/hot/new' },
]

// uniapp 获取页面参数
const query = defineProps<{
  type: string
}>()
// console.log(query)
// 当前推荐类型: 1 特惠推荐,2 爆款推荐,3 一站买全,4 新鲜好物 中的一个
const currHot = hotMap.find((v) => v.type === query.type)
// 动态设置标题
uni.setNavigationBarTitle({ title: currHot!.title })

//页面调用:获取热门推荐数据的通用接口
import { getHotRecommendAPI } from '@/services/hot'

/* 页面渲染 */
import { ref } from 'vue'
import type { SubTypeItem } from '@/types/hot'
const bannerPicture = ref('')
const subTypes = ref<SubTypeItem[]>([])
//获取热门推荐数据
const getHotRecommendData = async () => {
  // 调用获取热门推荐API
  const res = await getHotRecommendAPI(currHot!.url)

  //1. 推荐封面图
  // 获取推荐封面图并赋值给bannerPicture.value
  bannerPicture.value = res.result.bannerPicture
  // 2.推荐选项
  subTypes.value = res.result.subTypes
}

const activeIndex = ref(0) // 当前激活的推荐选项索引

// 分页的加载
const onScrolltolower = async () => {
  const currSubTypes = subTypes.value[activeIndex.value] // 当前激活的推荐选项:id,titlegoodsItems
  currSubTypes.goodsItems.page++ //页码累加
  //获取热门推荐的数据
  // 调用API传参
  const res = await getHotRecommendAPI(currHot!.url, {
    subType: currSubTypes.id,
    page: currSubTypes.goodsItems.page,
    pageSize: currSubTypes.goodsItems.pageSize,
  })
}
//页面初始化的时候调用
import { onLoad } from '@dcloudio/uni-app'
onLoad(() => {
  getHotRecommendData()
})
</script>

<template>
  <view class="viewport">
    <!-- 推荐封面图 -->
    <view class="cover">
      <image :src="bannerPicture"></image>
    </view>

    <!-- 推荐选项 -->
    <view class="tabs">
      <text
        v-for="(item, index) in subTypes"
        :key="item.id"
        class="text"
        :class="{ active: index === activeIndex }"
        @tap="activeIndex = index"
        >{{ item.title }}</text
      >
    </view>
    <!-- 推荐列表 -->
    <scroll-view
      @scrolltolower="onScrolltolower"
      v-for="item in subTypes"
      :key="item.id"
      scroll-y
      class="scroll-view"
    >
      <view class="goods">
        <navigator
          hover-class="none"
          class="navigator"
          v-for="goods in item.goodsItems.items"
          :key="goods.id"
          :url="`/pages/goods/goods?id=${goods.id}`"
        >
          <image class="thumb" :src="goods.picture"></image>
          <view class="name ellipsis">{{ goods.name }}</view>
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">{{ goods.price }}</text>
          </view>
        </navigator>
      </view>
      <view class="loading-text">正在加载...</view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  background-color: #f4f4f4;
}
.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 180rpx 0 0;
  position: relative;
}
.cover {
  width: 750rpx;
  height: 225rpx;
  border-radius: 0 0 40rpx 40rpx;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
.scroll-view {
  flex: 1;
}
.tabs {
  display: flex;
  justify-content: space-evenly;
  height: 100rpx;
  line-height: 90rpx;
  margin: 0 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  background-color: #fff;
  position: relative;
  z-index: 9;
  .text {
    margin: 0 20rpx;
    position: relative;
  }
  .active {
    &::after {
      content: '';
      width: 40rpx;
      height: 4rpx;
      transform: translate(-50%);
      background-color: #27ba9b;
      position: absolute;
      left: 50%;
      bottom: 24rpx;
    }
  }
}
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx 20rpx;
  .navigator {
    width: 345rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }
  .thumb {
    width: 305rpx;
    height: 305rpx;
  }
  .name {
    height: 88rpx;
    font-size: 26rpx;
  }
  .price {
    line-height: 1;
    color: #cf4444;
    font-size: 30rpx;
  }
  .symbol {
    font-size: 70%;
  }
  .decimal {
    font-size: 70%;
  }
}

.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0 50rpx;
}
</style>

二.商品分类页category.vue

商品分类页是在底部tabbar的第二个页面,结构如下图:
在这里插入图片描述
粘贴静态结构如下:category.vue(已存在)

<script setup lang="ts">
//
</script>
<template>
  <view class="viewport">
    <!-- 搜索框 -->
    <view class="search">
      <view class="input">
        <text class="icon-search">女靴</text>
      </view>
    </view>
    <!-- 分类 -->
    <view class="categories">
      <!-- 左侧：一级分类 -->
      <scroll-view class="primary" scroll-y>
        <view v-for="(item, index) in 10" :key="item" class="item" :class="{ active: index === 0 }">
          <text class="name"> 居家 </text>
        </view>
      </scroll-view>
      <!-- 右侧：二级分类 -->
      <scroll-view class="secondary" scroll-y>
        <!-- 焦点图 -->
        <XtxSwiper class="banner" :list="[]" />
        <!-- 内容区域 -->
        <view class="panel" v-for="item in 3" :key="item">
          <view class="title">
            <text class="name">宠物用品</text>
            <navigator class="more" hover-class="none">全部</navigator>
          </view>
          <view class="section">
            <navigator
              v-for="goods in 4"
              :key="goods"
              class="goods"
              hover-class="none"
              :url="`/pages/goods/goods?id=`"
            >
              <image
                class="image"
                src="https://yanxuan-item.nosdn.127.net/674ec7a88de58a026304983dd049ea69.jpg"
              ></image>
              <view class="name ellipsis">木天蓼逗猫棍</view>
              <view class="price">
                <text class="symbol">¥</text>
                <text class="number">16.00</text>
              </view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.search {
  padding: 0 30rpx 20rpx;
  background-color: #fff;
  .input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64rpx;
    padding-left: 26rpx;
    color: #8b8b8b;
    font-size: 28rpx;
    border-radius: 32rpx;
    background-color: #f3f4f4;
  }
}
.icon-search {
  &::before {
    margin-right: 10rpx;
  }
}
/* 分类 */
.categories {
  flex: 1;
  min-height: 400rpx;
  display: flex;
}
/* 一级分类 */
.primary {
  overflow: hidden;
  width: 180rpx;
  flex: none;
  background-color: #f6f6f6;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 96rpx;
    font-size: 26rpx;
    color: #595c63;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      left: 42rpx;
      bottom: 0;
      width: 96rpx;
      border-top: 1rpx solid #e3e4e7;
    }
  }
  .active {
    background-color: #fff;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 8rpx;
      height: 100%;
      background-color: #27ba9b;
    }
  }
}
.primary .item:last-child::after,
.primary .active::after {
  display: none;
}
/* 二级分类 */
.secondary {
  background-color: #fff;
  .carousel {
    height: 200rpx;
    margin: 0 30rpx 20rpx;
    border-radius: 4rpx;
    overflow: hidden;
  }
  .panel {
    margin: 0 30rpx 0rpx;
  }
  .title {
    height: 60rpx;
    line-height: 60rpx;
    color: #333;
    font-size: 28rpx;
    border-bottom: 1rpx solid #f7f7f8;
    .more {
      float: right;
      padding-left: 20rpx;
      font-size: 24rpx;
      color: #999;
    }
  }
  .more {
    &::after {
      font-family: 'erabbit' !important;
      content: '\e6c2';
    }
  }
  .section {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 0;
    .goods {
      width: 150rpx;
      margin: 0rpx 30rpx 20rpx 0;
      &:nth-child(3n) {
        margin-right: 0;
      }
      image {
        width: 150rpx;
        height: 150rpx;
      }
      .name {
        padding: 5rpx;
        font-size: 22rpx;
        color: #333;
      }
      .price {
        padding: 5rpx;
        font-size: 18rpx;
        color: #cf4444;
      }
      .number {
        font-size: 24rpx;
        margin-left: 2rpx;
      }
    }
  }
}
</style>
1.导入轮拨图组件并渲染数据

轮拨图组件XtxSwiper在首页已经封装过,此时只需调用即可
接口api也已经封装过,此时要传入商品分类对应的数据,只需携带参数(2)即可
在这里插入图片描述

import { getHomeBannerAPI } from '@/services/home'
import { ref } from 'vue'
// 获取轮播图数据
const bannerList = ref<BannerItem[]>([])
const getBannerData = async () => {
  const res = await getHomeBannerAPI(2)//传参,与首页数据的调用方式作区分
  bannerList.value = res.result
}

// 页面加载
onLoad(() => {
  getBannerData()
})

 <!-- 焦点图 -->
 <XtxSwiper class="banner" :list="bannerList" />
2.渲染一级分类并实现Tab交互
2.1.封装api接口

在这里插入图片描述
新建src/services/category.ts

export const getCategoryTopAPI = () => {
  return http<CategoryTopItem[]>({
    method: 'GET',
    url: '/category/top',
  })
}
2.2.页面调用
//category.vue

import { getCategoryTopAPI } from '@/services/category'
// 获取分类列表数据
const categoryList = ref<CategoryTopItem[]>([])
const getCategoryTopData = async () => {
  const res = await getCategoryTopAPI()
  categoryList.value = res.result
}

*此时categoryList 和 res.result 未声明类型

2.3.类型声明
  • 新建 src/types/category.d.ts
/** 一级分类项 */
export type CategoryTopItem = {
  /** 二级分类集合[ 二级分类项 ] */
  children: CategoryChildItem[]//二级分类项的类型
  /** 一级分类id */
  id: string
  /** 一级分类图片集[ 一级分类图片项 ] */
  imageBanners: string[]
  /** 一级分类名称 */
  name: string
  /** 一级分类图片 */
  picture: string
}

import type { GoodsItem } from './global'
/** 二级分类项 */
export type CategoryChildItem = {
  /** 商品集合[ 商品项 ] */
  goods: GoodsItem[]
  /** 二级分类id */
  id: string
  /** 二级分类名称 */
  name: string
  /** 二级分类图片 */
  picture: string
}
  • 声明categoryList的类型
//category.vue

import type { CategoryTopItem } from '@/types/category'
const bannerList = ref<BannerItem[]>([])
  • 声明res.result的类型
//category.ts

import { http } from '@/utils/http'
import type { CategoryTopItem } from '@/types/category'
export const getCategoryTopAPI = () => {
  return http<CategoryTopItem[]>({
    method: 'GET',
    url: '/category/top',
  })
}
2.4.动态渲染
<!-- 左侧：一级分类 -->
<scroll-view class="primary" scroll-y>
  <view
    v-for="(item, index) in categoryList"
    :key="item.id"
    class="item"
  >
    <text class="name">
      {{ item.name }}
    </text>
  </view>
</scroll-view>
2.5.Tab交互

此时每个一级分类选项都有高亮效果,优化为:动态绑定active类名的选项才显示高亮
实现逻辑:让点击的选项获得active类名

// 高亮下标
const activeIndex = ref(0)

<!-- 左侧：一级分类 -->
<scroll-view class="primary" scroll-y>
  <view
    class="item"
    v-for="(item, index) in categoryList"
    :key="item.id"
    :class="{ active: index === activeIndex }"
    @tap="activeIndex = index"
  >
    {{ item.name }}
  </view>
</scroll-view>
3.渲染二级分类

商品二级分类是从属于某个一级分类的

3.1.提取二级分类数据

通过 computed 配合高亮下标提取当前二级分类数据

import { computed, ref } from 'vue'
// 提取当前二级分类数据:基于一级分类[下标],就得到一个二级分类了
const subCategoryList = computed(() => {
    return categoryList.value[activeIndex.value]?.children || []
}}
3.2.二级分类渲染

使用subCategoryList数组对二级分类下的数据进行动态渲染

<!-- 内容区域 -->
<view class="panel" v-for="item in subCategoryList" :key="item.id">
  <view class="title">
    <text class="name">{{ item.name }}</text>
    <navigator class="more" hover-class="none">全部</navigator>
  </view>
  <view class="section">
    <navigator
      v-for="goods in item.goods"
      :key="goods.id"
      class="goods"
      hover-class="none"
      :url="`/pages/goods/goods?id=${goods.id}`"
    >
      <image class="image" :src="goods.picture"></image>
      <view class="name ellipsis">{{ goods.name }}</view>
      <view class="price">
        <text class="symbol">¥</text>
        <text class="number">{{ goods.price }}</text>
      </view>
    </navigator>
  </view>
</view>
4.骨架屏

在这里插入图片描述
略,详见首页设置骨架屏的步骤:https://blog.youkuaiyun.com/rowlet/article/details/148423040?spm=1001.2014.3001.5502

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值