uniapp商城之首页模块

---

前言

主要涉及到组件通信、组件自动导入、数据渲染、触底分页加载、下拉刷新等。

---

一、自定义导航栏

自定义导航栏的样式需要适配不同的机型。

操作步骤

1. 准备组件静态结构
2. 修改页面配置，隐藏默认导航栏，修改文字颜色
3. 样式适配 —> 安全区域

1.静态结构

src/pages/index/components/CustomNavbar.vue

2.修改页面配置

// src/pages.json
{"path": "pages/index/index","style": {"navigationStyle": "custom", // 隐藏默认导航"navigationBarTextStyle": "white","navigationBarTitleText": "首页"}
}

3.组件安全区适配

不同手机的安全区域不同，适配安全区域能防止页面重要内容被遮挡。
通过uni.getSystemInfoSync()获取屏幕边界到安全区的距离。

二、通用轮播组件

在该项目中，总共有两处广告位，分别位于【首页】和 【商品分类页】。
轮播图组件需要在首页和分类页使用，需要封装成通用组件。

1. 静态结构组件

首页广告布局为独立的组件XtxSwiper,位于src/components目录中。
该组件定义了list属性接收外部传入的数据，内部通过小程序内置组件swiper展示首页广告的数据。

2.自动导入全局组件

全局组件类型声明
Volar插件说明：Vue Language Tools

自动导入配置

3.首页轮播图数据获取

接口封装

// 存放路径: src/services/home.ts
import type { BannerItem } from '@/types/home'/*** 首页-广告区域-小程序* @param distributionSite 广告区域展示位置（投放位置 投放位置，1为首页，2为分类商品页） 默认是1*/
export const getHomeBannerAPI = (distributionSite = 1) => {return http<BannerItem[]>({method: 'GET',url: '/home/banner',data: {distributionSite,},})
}

类型声明

// 存放路径：src/types/home.d.ts
/** 首页-广告区域数据类型 */
export type BannerItem = {/** 跳转链接 */hrefUrl: string/** id */id: string/** 图片链接 */imgUrl: string/** 跳转类型 */type: number
}

数据渲染

三、首页分类

1.静态结构

前台类目布局为独立的组件 CategoryPanel 属于首页的业务组件，存放到首页的components目录中。

2.首页获取分类数据并渲染

接口封装

// services/home.ts
/*** 首页-前台分类-小程序*/
export const getHomeCategoryAPI = () => {return http<CategoryItem[]>({method: 'GET',url: '/home/category/mutli',})
}

数据类型

/** 首页-前台类目数据类型 */
export type CategoryItem = {/** 图标路径 */icon: string/** id */id: string/** 分类名称 */name: string
}

页面渲染

四、热门推荐

后端根据用户的消费习惯等信息向用户推荐一系列商品，前端负责将这些商品展示给用户。

1.静态结构

热门推荐布局为独立的组件HotPanel,属于首页的业务组件，存放到首页的components目录中。

<script setup lang="ts">
//
</script><template><!-- 推荐专区 --><view class="panel hot"><view class="item" v-for="item in 4" :key="item"><view class="title"><text class="title-text">特惠推荐</text><text class="title-desc">