uniapp商城之首页模块
文章目录
- 前言
- 一、自定义导航栏
- 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 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">相关文章:
uniapp商城之首页模块
文章目录 前言一、自定义导航栏1.静态结构2.修改页面配置3.组件安全区适配二、通用轮播组件1. 静态结构组件2.自动导入全局组件3.首页轮播图数据获取三、首页分类1.静态结构2.首页获取分类数据并渲染四、热门推荐1.静态结构2.首页获取推荐数据并渲染3.首页跳转详细推荐页五、猜…...
【Javascript Day13、14、15、16】
html的DOM操作 // JS 是为了让页面实现动态网页效果 // 动态和静态区分取决于JS的和页面标签的数据交互 // 动态网页:有数据交互 // 静态网页:无数据交互 // JS 和 元素的关联操作对象 DOM // 整个HT…...
linux 板子的wifi模块连上路由器后,用udhcpc给板子wifi分配ip,udhcpc获取到ip,但没有写入wlan0网卡上
linux 板子的wifi模块连上路由器后,用udhcpc给板子wifi分配ip,udhcpc获取到ip,但没有写入wlan0网卡上 这里的问题是 /usr/share/udhcpc/default.script脚本有问题 用下面正确脚本,即可写进去 #!/bin/sh# udhcpc script for busybox # Copyr…...
openGauss 3.0 数据库在线实训课程13: 学习逻辑结构:表管理1
前提 我正在参加21天养成好习惯| 第二届openGauss每日一练活动 课程详见:openGauss 3.0.0数据库在线实训课程 学习目标 学习openGauss表的创建、搜索路径和访问方法等 课程作业 1.创建一个表(默认,不指定模式),查…...
网络编程-
文章目录 网络编程套接字UDP/TCP的api使用 网络编程套接字 socket,是操作系统给应用程序(传输层给应用层)提供的api,Java也对这个api进行了封装。 socket提供了两组不同的api,UDP有一套,TCP有一套&#x…...
基于单片机的常规肺活量SVC简单计算
常规肺活量 SVC(Slow Vital Capacity)是指尽力吸气后缓慢而又完全呼出的最大气量。 成年男性的肺活量通常在 3500-4000ml 之间,成年女性的肺活量通常在 2500-3000ml 之间。 单片机一般通过外接流量传感器,使用ADC高速采集的方式…...
【PostgreSQL】PG在windows下的安装
一、准备 通过官网下载安装文件,官方下载路径如下: https://www.postgresql.org/download/windows/ 二、安装 双击postgresql-17.3-1-windows-x64.exe文件,启动安装,进入安装步骤,点击Next 选择PG安装路径ÿ…...
电动汽车电池监测平台系统设计(论文+源码+图纸)
1总体设计 本次基于单片机的电池监测平台系统设计,其整个系统架构如图2.1所示,其采用STC89C52单片机作为控制器,结合ACS712电流传感器、TLC1543模数转换器、LCD液晶、DS18B20温度传感器构成整个系统,在功能上可以实现电压、电流、…...
基于和声搜索(Harmony Search, HS)的多中心点选址优化算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于和声搜索(Harmony Search, HS)的多中心点选址优化算法matlab仿真。可以设置多个不同的中心点。 2.测试软件版本以及运行结果展示 matlab2022a/matlab2024b版…...
单链表的概念,结构和优缺点
1. 概念 链表是一种物理存储结构上非连续,非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的。 2. 单链表的结构 单链表是由一系列节点组成的线性结构,每个结点包含两个域。:数据域和指针域。 数据域用来…...
SpringBoot+数据可视化的奶茶点单购物平台(程序+论文+讲解+安装+调试+售后)
感兴趣的可以先收藏起来,还有大家在毕设选题,项目以及论文编写等相关问题都可以给我留言咨询,我会一一回复,希望帮助更多的人。 系统介绍 本奶茶点单购物平台搭建在 Spring Boot 框架之上,充分利用其强大的依赖管理机…...
深入理解 Vue3 中 ref 与 reactive 的区别及应用
深入理解 Vue3 中 ref 与 reactive 的区别及应用 在 Vue3 的开发世界里,响应式编程是其核心特性之一,而ref与reactive作为实现响应式的关键 API,理解它们的区别和适用场景对于开发者来说至关重要。本文将带你深入剖析这两个 API,…...
TDengine 客户端连接工具 taos-Cli
简介工具获取运行命令行参数 基础参数高级参数 数据导出/导入 数据导出数据导入 执行 SQL 脚本使用小技巧 TAB 键自动补全设置字符列显示宽度其它 错误代码表 简介 TDengine 命令行工具(以下简称 TDengine CLI)是用户操作 TDengine 实例并与之交互最简…...
Linux(ubuntu)下载ollama速度慢解决办法
国内安装Ollama都很慢,因为一直卡在下载中,直接通过官网的链接地址下载方法: curl -fsSL https://ollama.com/install.sh | sh速度大概是10min下载1%,完全不能接受啊! 其中很好的一个加速方式是通过使用github文件加速…...
Mac安装JD-GUI
Mac安装反编译工具步骤如下: 打开官网https://java-decompiler.github.io/ 选择下载mac的安装包解压下载好的压缩包,点击JD-GUI安装 有可能会遇到如下错误。请先检查是否安装JDK,通过java -version命令查看是否是1.8版本的jdk如果jdk没问题&…...
Jenkins 配置 Git Parameter 四
Jenkins 配置 Git Parameter 四 一、开启 项目参数设置 勾选 This project is parameterised 二、添加 Git Parameter 如果此处不显示 Git Parameter 说明 Jenkins 还没有安装 Git Parameter plugin 插件,请先安装插件 Jenkins 安装插件 三、设置基本参数 点击…...
【AI】Docker中快速部署Ollama并安装DeepSeek-R1模型: 一步步指南
【AI】Docker中快速部署Ollama并安装DeepSeek-R1模型: 一步步指南 一、前言 为了确保在 Docker 环境中顺利安装并高效运行 Ollama 以及 DeepSeek 离线模型,本文将详细介绍整个过程,涵盖从基础安装到优化配置等各个方面。通过对关键参数和配置的深入理解…...
Python 自然语言处理(NLP)和文本挖掘的常规操作过程
Python 自然语言处理(NLP)和文本挖掘 自然语言处理(NLP)和文本挖掘是数据科学中的重要领域,涉及对文本数据的分析和处理。Python 提供了丰富的库和工具,用于执行各种 NLP 和文本挖掘任务。以下是一些常见的…...
传统数组 vs vector和list
传统的数组: int arr[10]; 传统的数组有以下的缺点: 1)长度不可修改 2)内存分配 局部数组:把数组定在函数内, 数组便是局部变量,故会被分配在栈上 但栈的大小是有限制的 ,故其在内存中不能超…...
CRMEB 多商户版v3.0.1源码全开源+PC端+Uniapp前端+搭建教程
一.介绍 crmeb多商户是一套B2B2C商家入驻模式的平台多商户商城系统,系统支持平台自营、联营、招商等多种运营模式,可满足企业新零售、批发、分销、预售、O2O、多店、商铺入驻等各种业务需求。 后端全开源、uniapp多端可编译! 二、搭建教程…...
Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
css的定位(position)详解:相对定位 绝对定位 固定定位
在 CSS 中,元素的定位通过 position 属性控制,共有 5 种定位模式:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和…...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域,向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能,能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作,并通过具体…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...
MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用
文章目录 一、背景知识:什么是 B-Tree 和 BTree? B-Tree(平衡多路查找树) BTree(B-Tree 的变种) 二、结构对比:一张图看懂 三、为什么 MySQL InnoDB 选择 BTree? 1. 范围查询更快 2…...
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下,推客小程序系统凭借其裂变传播、精准营销等特性,成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径,助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
抽象类和接口(全)
一、抽象类 1.概念:如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象,这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法,包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中,⼀个类如果被 abs…...
