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">