昆明seo网站排名优化,夸克搜索,郑州平台网站建设,湖南省建设厅宁艳芳文章目录 前言一、自定义导航栏1.静态结构2.修改页面配置3.组件安全区适配二、通用轮播组件1. 静态结构组件2.自动导入全局组件3.首页轮播图数据获取三、首页分类1.静态结构2.首页获取分类数据并渲染四、热门推荐1.静态结构2.首页获取推荐数据并渲染3.首页跳转详细推荐页五、猜… 文章目录 前言一、自定义导航栏1.静态结构2.修改页面配置3.组件安全区适配 二、通用轮播组件1. 静态结构组件2.自动导入全局组件3.首页轮播图数据获取 三、首页分类1.静态结构2.首页获取分类数据并渲染 四、热门推荐1.静态结构2.首页获取推荐数据并渲染3.首页跳转详细推荐页 五、猜你喜欢1.静态结构2.核心业务 六、下拉刷新七、骨架屏 前言
主要涉及到组件通信、组件自动导入、数据渲染、触底分页加载、下拉刷新等。 一、自定义导航栏
自定义导航栏的样式需要适配不同的机型。 操作步骤
准备组件静态结构修改页面配置，隐藏默认导航栏，修改文字颜色样式适配 — 安全区域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 httpBannerItem[]({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 httpCategoryItem[]({method: 'GET',url: '/home/category/mutli',})
}数据类型
/** 首页-前台类目数据类型 */
export type CategoryItem = {/** 图标路径 */icon: string/** id */id: string/** 分类名称 */name: string
}页面渲染
四、热门推荐
后端根据用户的消费习惯等信息向用户推荐一系列商品，前端负责将这些商品展示给用户。
1.静态结构
热门推荐布局为独立的组件HotPanel,属于首页的业务组件，存放到首页的components目录中。
script setup lang="ts"
//
/scripttemplate!-- 推荐专区 --view class="panel hot"view class="item" v-for="item in 4" :key="item"view class="title"text class="title-text"特惠推荐/texttext class="title-desc"
