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

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

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

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

    小兔鲜儿 - 推荐模块- day03

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

    动态获取数据

    参考效果

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

    静态结构

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

    1. // /src/pages/hot/hot.vue
    2. <script setup lang="ts">
    3. // 热门推荐页 标题和url
    4. const hotMap = [
    5.   { type: '1', title: '特惠推荐', url: '/hot/preference' },
    6.   { type: '2', title: '爆款推荐', url: '/hot/inVogue' },
    7.   { type: '3', title: '一站买全', url: '/hot/oneStop' },
    8.   { type: '4', title: '新鲜好物', url: '/hot/new' },
    9. ]
    10. </script>
    11.  
    12. <template>
    13.   <view class="viewport">
    14.     <!-- 推荐封面图 -->
    15.     <view class="cover">
    16.       <image
    17.         src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-20/84abb5b1-8344-49ae-afc1-9cb932f3d593.jpg"
    18.       ></image>
    19.     </view>
    20.     <!-- 推荐选项 -->
    21.     <view class="tabs">
    22.       <text class="text active">抢先尝鲜</text>
    23.       <text class="text">新品预告</text>
    24.     </view>
    25.     <!-- 推荐列表 -->
    26.     <scroll-view scroll-y class="scroll-view">
    27.       <view class="goods">
    28.         <navigator
    29.           hover-class="none"
    30.           class="navigator"
    31.           v-for="goods in 10"
    32.           :key="goods"
    33.           :url="`/pages/goods/goods?id=`"
    34.         >
    35.           <image
    36.             class="thumb"
    37.             src="https://yanxuan-item.nosdn.127.net/5e7864647286c7447eeee7f0025f8c11.png"
    38.           ></image>
    39.           <view class="name ellipsis">不含酒精，使用安心爽肤清洁湿巾</view>
    40.           <view class="price">
    41.             <text class="symbol">¥</text>
    42.             <text class="number">29.90</text>
    43.           </view>
    44.         </navigator>
    45.       </view>
    46.       <view class="loading-text">正在加载...</view>
    47.     </scroll-view>
    48.   </view>
    49. </template>
    50.  
    51. <style lang="scss">
    52. page {
    53.   height: 100%;
    54.   background-color: #f4f4f4;
    55. }
    56. .viewport {
    57.   display: flex;
    58.   flex-direction: column;
    59.   height: 100%;
    60.   padding: 180rpx 0 0;
    61.   position: relative;
    62. }
    63. .cover {
    64.   width: 750rpx;
    65.   height: 225rpx;
    66.   border-radius: 0 0 40rpx 40rpx;
    67.   overflow: hidden;
    68.   position: absolute;
    69.   left: 0;
    70.   top: 0;
    71. }
    72. .scroll-view {
    73.   flex: 1;
    74. }
    75. .tabs {
    76.   display: flex;
    77.   justify-content: space-evenly;
    78.   height: 100rpx;
    79.   line-height: 90rpx;
    80.   margin: 0 20rpx;
    81.   font-size: 28rpx;
    82.   border-radius: 10rpx;
    83.   box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
    84.   color: #333;
    85.   background-color: #fff;
    86.   position: relative;
    87.   z-index: 9;
    88.   .text {
    89.     margin: 0 20rpx;
    90.     position: relative;
    91.   }
    92.   .active {
    93.     &::after {
    94.       content: '';
    95.       width: 40rpx;
    96.       height: 4rpx;
    97.       transform: translate(-50%);
    98.       background-color: #27ba9b;
    99.       position: absolute;
    100.       left: 50%;
    101.       bottom: 24rpx;
    102.     }
    103.   }
    104. }
    105. .goods {
    106.   display: flex;
    107.   flex-wrap: wrap;
    108.   justify-content: space-between;
    109.   padding: 0 20rpx 20rpx;
    110.   .navigator {
    111.     width: 345rpx;
    112.     padding: 20rpx;
    113.     margin-top: 20rpx;
    114.     border-radius: 10rpx;
    115.     background-color: #fff;
    116.   }
    117.   .thumb {
    118.     width: 305rpx;
    119.     height: 305rpx;
    120.   }
    121.   .name {
    122.     height: 88rpx;
    123.     font-size: 26rpx;
    124.   }
    125.   .price {
    126.     line-height: 1;
    127.     color: #cf4444;
    128.     font-size: 30rpx;
    129.   }
    130.   .symbol {
    131.     font-size: 70%;
    132.   }
    133.   .decimal {
    134.     font-size: 70%;
    135.   }
    136. }
    137.  
    138. .loading-text {
    139.   text-align: center;
    140.   font-size: 28rpx;
    141.   color: #666;
    142.   padding: 20rpx 0 50rpx;
    143. }
    144. </style>

    获取页面参数

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

    项目首页（传递参数）

    1. // src/pages/index/components/HotPanel.vue
    2. <navigator :url="`/pages/hot/hot?type=${item.type}`">
    3.   …省略  
    4. </navigator>

    热门推荐页（获取参数）

    1. // src/pages/hot/hot.vue
    2. <script setup lang="ts">
    3. // 热门推荐页 标题和url
    4. const hotMap = [
    5.   { type: '1', title: '特惠推荐', url: '/hot/preference' },
    6.   { type: '2', title: '爆款推荐', url: '/hot/inVogue' },
    7.   { type: '3', title: '一站买全', url: '/hot/oneStop' },
    8.   { type: '4', title: '新鲜好物', url: '/hot/new' },
    9. ]
    10. // uniapp 获取页面参数
    11. const query = defineProps<{
    12.   type: string
    13. }>()
    14. // console.log(query)
    15. const currHot = hotMap.find((v) => v.type === query.type)
    16. // 动态设置标题
    17. uni.setNavigationBarTitle({ title: currHot!.title })
    18. </script>

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

    获取数据

    地址参数

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

    type

    推荐类型

    接口路径

    1

    特惠推荐

    /hot/preference

    2

    爆款推荐

    /hot/inVogue

    3

    一站买全

    /hot/oneStop

    4

    新鲜好物

    /hot/new

    接口调用

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

    接口地址：见上表

    请求方式：GET

    请求参数：

    Query:

    字段名称

    是否必须

    默认值

    备注

    subType

    否

    无

    推荐列表 Tab 项的 id

    page

    否

    1

    页码

    pageSize

    否

    10

    每页商品数量

    请求封装

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

    1. import { http } from '@/utils/http'
    2. import type { PageParams } from '@/types/global'
    3.  
    4. type HotParams = PageParams & {
    5.   /** Tab 项的 id，默认查询全部 Tab 项的第 1 页数据 */
    6.   subType?: string
    7. }
    8. /**
    9.  * 通用热门推荐类型
    10.  * @param url 请求地址
    11.  * @param data 请求参数
    12.  */
    13. export const getHotRecommendAPI = (url: string, data?: HotParams) => {
    14.   return http<HotResult>({
    15.     method: 'GET',
    16.     url,
    17.     data,
    18.   })
    19. }

    类型声明

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

    1. // src/types/global.d.ts
    2. /** 通用商品类型 */
    3. export type GoodsItem = {
    4.   /** 商品描述 */
    5.   desc: string
    6.   /** 商品折扣 */
    7.   discount: number
    8.   /** id */
    9.   id: string
    10.   /** 商品名称 */
    11.   name: string
    12.   /** 商品已下单数量 */
    13.   orderNum: number
    14.   /** 商品图片 */
    15.   picture: string
    16.   /** 商品价格 */
    17.   price: number
    18. }

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

    1. // src/services/home.ts
    2. import type { GoodsItem } from '@/types/global'
    3.  
    4. // GuessItem 和 GoodsItem 类型相同
    5. export type GuessItem = GoodsItem

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

    1. import type { PageResult, GoodsItem } from './global'
    2.  
    3. /** 热门推荐 */
    4. export type HotResult = {
    5.   /** id信息 */
    6.   id: string
    7.   /** 活动图片 */
    8.   bannerPicture: string
    9.   /** 活动标题 */
    10.   title: string
    11.   /** 子类选项 */
    12.   subTypes: SubTypeItem[]
    13. }
    14.  
    15. /** 热门推荐-子类选项 */
    16. export type SubTypeItem = {
    17.   /** 子类id */
    18.   id: string
    19.   /** 子类标题 */
    20.   title: string
    21.   /** 子类对应的商品集合 */
    22.   goodsItems: PageResult<GoodsItem>
    23. }

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

    多 Tabs 分页加载

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

    Tabs 交互基础

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

    参考代码

    1. <script setup lang="ts">
    2. // 高亮的下标
    3. const activeIndex = ref(0)
    4. </script>
    5.  
    6. <template>
    7.   <!-- 推荐选项 -->
    8.   <view class="tabs">
    9.     <text
    10.       class="text"
    11.       v-for="(item, index) in subTypes"
    12.       :key="item.id"
    13.       :class="{ active: index === activeIndex }"
    14.       @tap="activeIndex = index"
    15.     >
    16.       {{ item.title }}
    17.     </text>
    18.   </view>
    19.   <!-- 推荐列表 -->
    20.   <scroll-view
    21.     scroll-y
    22.     class="scroll-view"
    23.     v-for="(item, index) in subTypes"
    24.     :key="item.id"
    25.     v-show="activeIndex === index"
    26.   >
    27.     ...省略
    28.   </scroll-view>
    29. </template>

    加载选中 Tabs 分页数据

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

    操作流程

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

    参考代码(总)

    热门推荐页

    1. <script setup lang="ts">
    2. import { getHotRecommendAPI } from '@/services/hot'
    3. import type { SubTypeItem } from '@/types/hot'
    4. import { onLoad } from '@dcloudio/uni-app'
    5. import { ref } from 'vue'
    6.  
    7. // 热门推荐页 标题和url
    8. const hotMap = [
    9.   { type: '1', title: '特惠推荐', url: '/hot/preference' },
    10.   { type: '2', title: '爆款推荐', url: '/hot/inVogue' },
    11.   { type: '3', title: '一站买全', url: '/hot/oneStop' },
    12.   { type: '4', title: '新鲜好物', url: '/hot/new' },
    13. ]
    14.  
    15. // uniapp 获取页面参数
    16. const query = defineProps<{
    17.   type: string
    18. }>()
    19. // 获取当前推荐信息
    20. const currHot = hotMap.find((v) => v.type === query.type)
    21. // 动态设置标题
    22. uni.setNavigationBarTitle({ title: currHot!.title })
    23.  
    24. // 推荐封面图
    25. const bannerPicture = ref('')
    26. // 推荐选项
    27. const subTypes = ref<(SubTypeItem & { finish?: boolean })[]>([])
    28. // 高亮的下标
    29. const activeIndex = ref(0)
    30. // 获取热门推荐数据
    31. const getHotRecommendData = async () => {
    32.   const res = await getHotRecommendAPI(currHot!.url, {
    33.     // 技巧：环境变量，开发环境，修改初始页面方便测试分页结束
    34.     page: import.meta.env.DEV ? 30 : 1,
    35.     pageSize: 10,
    36.   })
    37.   // 保存封面
    38.   bannerPicture.value = res.result.bannerPicture
    39.   // 保存列表
    40.   subTypes.value = res.result.subTypes
    41. }
    42.  
    43. // 页面加载
    44. onLoad(() => {
    45.   getHotRecommendData()
    46. })
    47.  
    48. // 滚动触底
    49. const onScrolltolower = async () => {
    50.   // 获取当前选项
    51.   const currsubTypes = subTypes.value[activeIndex.value]
    52.   // 分页条件
    53.   if (currsubTypes.goodsItems.page < currsubTypes.goodsItems.pages) {
    54.     // 当前页码累加
    55.     currsubTypes.goodsItems.page++
    56.   } else {
    57.     // 标记已结束
    58.     currsubTypes.finish = true
    59.     // 退出并轻提示
    60.     return uni.showToast({ icon: 'none', title: '没有更多数据了~' })
    61.   }
    62.  
    63.   // 调用API传参
    64.   const res = await getHotRecommendAPI(currHot!.url, {
    65.     subType: currsubTypes.id,
    66.     page: currsubTypes.goodsItems.page,
    67.     pageSize: currsubTypes.goodsItems.pageSize,
    68.   })
    69.   // 新的列表选项
    70.   const newsubTypes = res.result.subTypes[activeIndex.value]
    71.   // 数组追加
    72.   currsubTypes.goodsItems.items.push(...newsubTypes.goodsItems.items)
    73. }
    74. </script>
    75.  
    76. <template>
    77.   <view class="viewport">
    78.     <!-- 推荐封面图 -->
    79.     <view class="cover">
    80.       <image :src="bannerPicture"></image>
    81.     </view>
    82.     <!-- 推荐选项 -->
    83.     <view class="tabs">
    84.       <text
    85.         v-for="(item, index) in subTypes"
    86.         :key="item.id"
    87.         class="text"
    88.         :class="{ active: index === activeIndex }"
    89.         @tap="activeIndex = index"
    90.         >{{ item.title }}</text
    91.       >
    92.     </view>
    93.     <!-- 推荐列表 -->
    94.     <scroll-view
    95.       v-for="(item, index) in subTypes"
    96.       :key="item.id"
    97.       v-show="activeIndex === index"
    98.       scroll-y
    99.       class="scroll-view"
    100.       @scrolltolower="onScrolltolower"
    101.     >
    102.       <view class="goods">
    103.         <navigator
    104.           hover-class="none"
    105.           class="navigator"
    106.           v-for="goods in item.goodsItems.items"
    107.           :key="goods.id"
    108.           :url="`/pages/goods/goods?id=${goods.id}`"
    109.         >
    110.           <image class="thumb" :src="goods.picture"></image>
    111.           <view class="name ellipsis">{{ goods.name }}</view>
    112.           <view class="price">
    113.             <text class="symbol">¥</text>
    114.             <text class="number">{{ goods.price }}</text>
    115.           </view>
    116.         </navigator>
    117.       </view>
    118.       <view class="loading-text">
    119.         {{ item.finish ? '没有更多数据了~' : '正在加载...' }}
    120.       </view>
    121.     </scroll-view>
    122.   </view>
    123. </template>
  • 相关阅读:
    Spring AOP使用与原理
    2023秋招nlp笔试题-太初
    Flink container exit 143 问题排查
    Python MongoDB
    ChatGPT帮助一名儿童确诊病因，之前17位医生无法确诊
    LLM Saturation与多模态AI的崛起
    JenKins使用（Linux）
    java输入输出方式
    svg图片代码data:image/svg+xml转png图片方法
    离线数据仓库第二讲
  • 原文地址：https://blog.csdn.net/m0_67184231/article/details/132842089