当前位置：首页 > news >正文

uniapp商城之首页模块

news 来源：原创 2025/5/9 22:02:59

文章目录

前言
一、自定义导航栏
- 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.首页跳转详细推荐页五、猜…...

编程日记 2025/5/9 22:02:59

类与对象C++详解（上）

目录 1.类的定义 1.1 类定义格式补充: struct与class的区别（c语言与c） 1.2 访问限定符 1.3 类域 2.实例化 3.对象大小 4.this指针 1.类的定义 1.1 类定义格式 class为定义类的关键字，Stack为类的名字，{}中为类的主体&…...

编程日记 2025/5/4 10:57:29

AI agent 未来好的趋势：AI医疗影像、智能客服、个性化推荐

AI agent 未来好的趋势：AI医疗影像、智能客服、个性化推荐目录 AI agent 未来好的趋势：AI医疗影像、智能客服、个性化推荐比特币AI Agents稳定币扩容区块链AI基础设施AI驱动的软件应用AI赋能的行业应用AI医疗影像、智能客服、个性化推荐AI药物研发比特币市场与机构化：2024…...

编程日记 2025/5/9 21:42:24

SpringBoot：使用spring-boot-test对web应用做单元测试时如何测试Filter?

对SpringBoot的Web应用做单元测试时，一般会使用spring-boot-test，pom.xml中会添加如下内容： <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><…...

编程日记 2025/5/9 5:42:56

【鱼眼镜头12】Scaramuzza的鱼眼相机模型实操，不依赖于具体的相机几何结构，直接从图像数据出发，因此更具灵活性。

文章目录 Scaramuzza相机模型标定效果2、原理和代码代码1、 2D映射到3D，函数输入为2D点坐标OCAM参数代码功能详解2、3D --> 2D 3、总结Scaramuzza 模型的核心思想Scaramuzza 模型的核心思想与 Kannala-Brandt 模型的对比Scaramuzza 模型的独特之处Scaramuzza 的意…...

编程日记 2025/5/9 21:56:30

WPF创建自定义类和控件及打包成dll引用

WPF创建自定义类和控件及打包成dll引用一、前言二、创建自定义类和控件并生成dll文件2.1创建类库项目2.2创建自定义类和控件2.3生成dll文件三、在其他项目中引用3.1添加dll文件引用3.2cs文件中引用命名空间3.3XAML文件中引用命名空间一、前言出于一些代码复用的需求&#…...

编程日记 2025/5/1 12:28:20

家里WiFi信号穿墙后信号太差怎么处理？

一、首先在调制解调器（俗称：猫）测试网速，网速达不到联系运营商； 二、网线影响不大，5类网线跑500M完全没问题； 三、可以在卧室增加辅助路由器（例如小米AX系列）90~200元区…...

编程日记 2025/5/9 21:40:11

C++初阶——简单实现string

简单实现std::string类及一些常用的成员函数。迭代器，使用指针简单代替。目录 1、String.h 2、String.cpp 3、Test.cpp 1、String.h #pragma once #define _CRT_SECURE_NO_WARNINGS 1#include <iostream> #include <assert.h>using namespace s…...

编程日记 2025/5/9 21:47:46

浏览器支持的通讯协议

浏览器支持的通讯协议 1. HTTP（HyperText Transfer Protocol） 版本 HTTP/1.0：每次请求都需要重新建立连接。HTTP/1.1：支持持久连接（Keep-Alive），减少连接开销。HTTP/2：多路复用&am…...

编程日记 2025/5/9 16:13:13

18.Python实战：实现年会抽奖系统

目录结构 python/ ├── sql/ │ └── table.sql # 创建数据库及数据表 ├── config/ │ └── __init__.py # 数据库和Flask配置 ├── static/ │ ├── style.css # 样式文件 │ └── script.js # JavaScript脚本…...

编程日记 2025/5/9 8:13:54

微信小程序地图标记点,安卓手机一次性渲染不出来的问题

问题描述： 如果微信小程序端，渲染的标记物太多，安卓手机存在标记物不显示的问题，原因初步判断是地图还没有渲染完，标记物数据已经加载完了，导致没有在地图上显示。解决办法： 使用map组件的b…...

编程日记 2025/5/9 5:19:50

机器翻译同样的文本，是从英语翻译成日语更准确还是中文翻译成日语更准确

在大多数情况下，从英语翻译成日语会比从中文翻译成日语更准确，原因如下： 1. 语言结构的相似性英语和日语的句子结构更接近，特别是在语法、从句使用、定语位置等方面。例如，日语和英语都使用 SVO 结构（主…...

编程日记 2025/5/9 6:27:31

ROS基本功能

1.Topic话题与Message消息（主要通讯方式） 基本规则发布消息的步骤常用工具话题的订阅使用launch启动多个节点...

编程日记 2025/5/9 21:36:57

C++字符串处理指南：从基础操作到性能优化——基于std::string的全面解析

博主将从C标准库中的 std::string 出发，详细探讨字符串的处理方法，涵盖常见操作、性能优化和实际应用场景。以下内容将围绕std::string 的使用展开，结合代码示例进行说明。一、std::string 的基本操作 1.1 创建与初始化 std::string 提供了…...

编程日记 2025/5/9 21:32:02

语言大模型基础概念一（先了解听说过的名词都是什么）

SFT（监督微调）和RLHF（基于人类反馈的强化学习）的区别 STF（Supervised Fine-Tuning）和RLHF（Reinforcement Learning from Human Feedback）是两种不同的模型训练方法，分别…...

编程日记 2025/5/9 21:33:54

完整的sql语句执行顺序 SELECT DISTINCT column1, column2, aggregate_function(column3) FROM table1JOIN table2 ON table1.column table2.column WHERE condition GROUP BY column1, column2 HAVING group_condition ORDER BY column1, column2 LIMIT offset, count;FROM子…...

编程日记 2025/5/9 21:37:58

更高效实用 vscode 的常用设置

VSCode 可以说是文本编辑神器, 不止程序员使用, 普通人用其作为文本编辑工具, 更是效率翻倍. 这里分享博主对于 VSCode 的好用设置, 让 VSCode 如虎添翼进入设置首先进入设置界面, 后续都在这里进行配置修改具体设置每项配置通过搜索关键字, 来快速定位配置项自动保存…...

编程日记 2025/5/9 21:32:02

Next.js【详解】CSS 样式方案

全局样式 Global CSS 默认已创建，即 src\app\globals.css，可根据需要修改默认在全局布局中导入 src\app\layout.tsx import "./globals.css";组件样式 CSS Modules 新建文件 src\app\test\styles.module.css .red {color: red;}导入目标页面…...

编程日记 2025/5/9 21:36:56

铁塔电单车协议对接电单车TCP json协议对接成熟充电桩系统搭建低速充电桩TCP 接口规范

低速充电桩 TCP 接口规范 2019 年 9 月 10 日目录低速充电桩 1 2) 概述 2 • 协议服务器(IOT_Server) 6 • 通讯报文原则 6 • 报文协议说明 6 报文中所有数值类型为十进制； 6报文中不允许使用转义字符，如\n、\t、\r、\s； 6 • 报文类型…...

编程日记 2025/5/8 17:29:40

CTF-web:java-h2 堆叠注入rce -- N1ctf Junior EasyDB

代码存在sql注入 // 处理登录表单的POST请求PostMapping({"/login"})public String handleLogin(RequestParam String username, RequestParam String password, HttpSession session, Model model) throws SQLException {// 验证用户凭据if (this.userService.valid…...

编程日记 2025/5/7 10:35:27

【异或数列——博弈论】

题目思路异或和为0（即每一位都有偶数个1）：平局最高有效位只有唯一的1：先手必胜最高有效位有奇数个1，偶数个0：先手必胜若先选1产生优势，则剩下偶数个1，偶数个0：对手选…...

编程日记 2025/5/4 21:18:39

2024 年 9 月青少年软编等考 C 语言三级真题解析

目录 T1. 爆气球思路分析T2. 乘法小宇宙思路分析T3. 有多少坑思路分析T4. 势均力敌思路分析T5. 买地攻略思路分析T1. 爆气球爆气球对孩子们来说是很好玩的游戏。假设有 n n n 只气球被布置在一条直线上，游戏的目标很简单，就是爆掉尽可能多的气球。但是这里我们加一条特殊的…...

编程日记 2025/5/9 21:29:45

JavaScript设计模式 -- 外观模式

在实际开发中，往往会遇到多个子系统协同工作时，直接操作各个子系统不仅接口繁琐，还容易导致客户端与内部实现紧密耦合。**外观模式（Facade Pattern）**通过为多个子系统提供一个统一的高层接口，将复杂性隐藏…...

编程日记 2025/5/6 14:09:22

在 Vue 项目中使用 SQLite 数据库的基础应用

目录一、环境准备二、数据库连接与操作1. 创建数据库连接2. 创建表3. 插入数据4. 查询数据5. 更新数据6. 删除数据三、在 Vue 组件中使用 SQLite 一、环境准备安装 Node.js 和 npm：确保已安装 Node.js 和 npm。创建 Vue 项目：使用 Vue CLI 创建一个…...

编程日记 2025/5/3 5:18:22

《安富莱嵌入式周报》第350期：Google开源Pebble智能手表，开源模块化机器人平台，开源万用表，支持10GHz HRTIM的单片机，开源CNC控制器

周报汇总地址：嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版： https://www.bilibili.com/video/BV1YPKEeyEeM/ 《安富莱嵌入式周报》第350期：Google开…...

编程日记 2025/5/9 21:43:31

多线程基础面试题剖析

一、线程的创建方式有几种创建线程的方式有两种，一种是继承Thread，一种是实现Runable 在这里推荐使用实现Runable接口，因为java是单继承的，一个类继承了Thread将无法继承其他的类，而java可以实现多个接口&#xff0…...

编程日记 2025/5/8 0:02:43

C++ Primer 函数重载

欢迎阅读我的【CPrimer】专栏专栏简介：本专栏主要面向C初学者，解释C的一些基本概念和基础语言特性，涉及C标准库的用法，面向对象特性，泛型特性高级用法。通过使用标准库中定义的抽象设施，使你更加适应高级…...

编程日记 2025/5/9 21:30:56

10bit VS 8bit 视频：色彩深度的较量，谁才是视觉盛宴的王者？

10bit 和 8bit 视频 10bit 视频和 8bit 视频的主要区别在于色彩深度和细节表现能力。10bit 视频具有更高的色彩深度和更丰富的细节表现，能够提供更平滑的色彩过渡和更真实的图像质量，但需要更多的存储空间和带宽。8bit 视频则在存储和传输方面更加高效，适合于对存储空间和带…...

编程日记 2025/5/9 21:35:56

从零开始-将小爱接入大模型

文章目录前言一、学习教程二、docker安装二、项目下载和配置三、文件修改文件.env.exampledeepseek模型注册gitee并获取密钥文件.migpt.example.js连接小爱同学三、运行项目创建目录启动docker容器总结前言基于当前人工智能的发展，大模型使用越来越方便&…...

编程日记 2025/5/9 21:48:50

关于 IoT DC3 中设备（Device）的理解

在物联网系统中，设备（Device）是一个非常宽泛的概念，它可以指代任何能够接入系统并进行数据交互的实体。包括但不限于手机、电脑、服务器、网关、硬件设备甚至是某些软件程序等所有能接入到该平台的媒介。内容定义目的示例 …...

编程日记 2025/5/3 17:29:50

北斗导航 | 周跳探测算法（matlab源码）

===================================================== github：https://github.com/MichaelBeechan CSDN：https://blog.csdn.net/u011344545 ===================================================== 周跳 1. 高次差法2. 相位减伪距法3. TurboEdit算法（MW+GF组合）4. 多项…...

编程日记 2025/5/2 17:15:04

Centos搭建python环境

在 CentOS 上配置 Python 环境可以通过以下步骤完成： 1. 检查系统自带 Python 版本 CentOS 7/8 可能已经自带了 Python： python3 --version 如果没有，或者版本过低，可以手动安装。 2. 安装 Python（推荐&#xff0…...

编程日记 2025/5/8 0:03:47

Python 字典思维导图

在本章中，你将学习能够将相关信息关联起来的Python字典。你将学习如何访问和修改字典中的信息。鉴于字典可存储的信息量几乎不受限制，因此我们会演示如何遍历字典中的数据。另外，你还将学习存储字典的列表、存储列表的字典和存储字典的字典。…...

编程日记 2025/5/5 3:45:01

springboot与springcloud对应版本

Spring Boot 与 Spring Cloud Alibaba 版本对应关系请根据您使用的 Spring Boot 版本，选择兼容的 Spring Cloud Alibaba 版本： Spring Boot Version Spring Cloud Alibaba Version Spring Cloud Version 3.0.2 2022.0.0.0 Spring Cloud 2022.0.0 3.0.2…...

编程日记 2025/5/7 3:52:15

verilog程序设计及SystemVerilog验证

1.Verilog测试程序设计基础 1.1Testbench及其结构在仿真的时候Testbench用来产生测试激励给待验证设计( Design Under Verification, DUV)，或者称为待测设计(Design UnderTest, DUT) 。测试程序的一般结构： Testbench是一个测试平台，信号…...

编程日记 2025/5/6 2:28:37

游戏引擎学习第104天

Z轴有点悬而未决我们正在进行渲染器相关的工作。之前我们已经完成了法线贴图的代码，虽然基本完成，但还有一些与光照相关的工作待完成。目前，天空和地面部分的光照处理已经相对正常，但局部光源的处理还没有做好。为了进行光照部…...

编程日记 2025/5/3 17:06:46

‌OpenAI GPT-4.5技术详解与未来展望

一、GPT-4.5的技术突破‌ OpenAI在人工智能领域的持续创新再次引领了技术潮流。近期，OpenAI内部已经成功实现了GPT-4.5的开发，这一版本相较于前代在多个方面实现了显著的技术突破‌。 GPT-4.5在算法优化和数据处理上进行了多项创新，使得模型在对自然语言的理解上，尤其是在…...

编程日记 2025/5/2 3:56:20

【科技革命】颠覆性力量与社会伦理的再平衡

目录 2025年科技革命：颠覆性力量与社会伦理的再平衡目录技术突破全景图认知智能的范式转移量子霸权实现路径生物编程技术革命能源结构重构工程产业生态链重构医疗健康新范式教育系统智能进化金融基础设施变革制造范式革命科技伦理与文明演进 2025年科技革命&#…...

编程日记 2025/5/8 20:00:49

好好说话：深度学习扫盲

大创项目是和目标检测算法YOLO相关的，浅浅了解了一些有关深度学习的知识。在这里根据本人的理解做一些梳理。深度学习是什么？ 之前经常听到AI，机器学习，深度学习这三个概念，但是对于三者的区别一直很模糊。 AI&…...

编程日记 2025/5/9 22:01:54

一款基于若依的wms系统

Wms-Ruoyi-仓库库存管理若依wms是一套基于若依的wms仓库管理系统，支持lodop和网页打印入库单、出库单。毫无保留给个人及企业免费使用。前端采用Vue、Element UI。后端采用Spring Boot、Spring Security、Redis & Jwt。权限认证使用Jwt，支持多终…...

编程日记 2025/5/9 21:45:39

【ISO 14229-1:2023 UDS诊断（会话控制0x10服务）测试用例CAPL代码全解析⑥】

ISO 14229-1:2023 UDS诊断【会话控制0x10服务】_TestCase06 作者：车端域控测试工程师更新日期：2025年02月14日关键词：UDS诊断、0x10服务、诊断会话控制、ECU测试、ISO 14229-1:2023 TC10-006测试用例用例ID测试场景验证要点参考条款预期…...

编程日记 2025/5/9 3:57:54

img标签的title和alt

img标签的title和alt 显示上 title:鼠标移入到图片上时候显示的内容； alt:图片无法加载时候显示的内容; <div class"box"><div><h3>title</h3><img src"./image/poster.jpg" title"这是封…...

编程日记 2025/5/9 21:59:38

redis cluster测试

集群节点信息这时候停掉一个master 172.30.60.31 从集群信息集中我们可以看到172.30.60.31的slave是172.30.60.41，查看41的日志，发现他成为了新的master 这时候我们在将172.30.60.41也杀死，会发现集群异常了尝试把172.30.60.31启动&#xff…...

编程日记 2025/5/6 0:14:23

harmonyOS的文件的增、删、读、写相关操作(fs/content)

注意: 操作harmonyOS的文件只能对app沙箱内的文件进行操作牵扯到两个支持点: fs和content这两个API; 具体的操作方法看下图: 创建文件 //js 引入 import fs from "ohos.files.fs" import featureAbility from "ohos.ability.featureAbility"; // 上下…...

编程日记 2025/5/9 21:55:18

12. Function Call实践

本文主要讲解大模型的function call能力，包括使用国内外在线模型和本地模型，以及如何微调以增强大模型的function call能力。回顾下大模型学习思路： 1. 环境准备 1.1 平台上【模型调试】中创建 2. 调用国内外大模型测试 2.1 调用GPT-4 代…...

编程日记 2025/5/5 20:51:24

随机生成多孔介质matlab程序

matlab生成随机分布纤维代码，用于后续模拟处理资源文件列表随机生成多孔介质matlab程序.pdf , 5821...

编程日记 2025/4/15 2:20:24

华为云kubernetes基于keda自动伸缩deployment副本（监听redis队列长度）

1 概述 KEDA（Kubernetes-based Event-Driven Autoscaler，网址是https://keda.sh）是在 Kubernetes 中事件驱动的弹性伸缩器，功能非常强大。不仅支持根据基础的CPU和内存指标进行伸缩，还支持根据各种消息队列中的长度、…...

编程日记 2025/5/9 12:45:55

是时候说再见了

说再见 2018 to 2025 2018：学习 2018年开始读研。师兄师姐们说可以写写CSDN博客，对找工作也有帮助。于是在12月4日，发布了自己的第一篇文章[翻译] 神经网络与深度学习首页 - Index。当时还在学习各种基础知识，看到了这个英文文…...

编程日记 2025/5/6 19:59:32

数据结构与算法-栈与队列的应用递归表达式求值

参考学习：B站-逊哥带你学编程栈与队列的应用题1： 答案：B 题2： 答案：C 题3： 答案：D 题4： 答案：C 题5： 答案：B 题6： 答案&…...

编程日记 2025/5/4 7:26:33

vue3.x 的shallowReactive 与 shallowRef 详细解读

在 Vue 3.x 中，shallowReactive 和 shallowRef 是两个用于创建浅层响应式数据的 API。它们与 reactive 和 ref 类似，但在处理嵌套对象时的行为有所不同。以下是它们的详细解读和示例。 1. shallowReactive 作用 shallowReactive 创建一个浅层响应式对…...

编程日记 2025/5/5 8:37:09

文章目录

前言

一、自定义导航栏

1.静态结构

2.修改页面配置

3.组件安全区适配

二、通用轮播组件

1. 静态结构组件

2.自动导入全局组件

3.首页轮播图数据获取

三、首页分类

1.静态结构

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

四、热门推荐

1.静态结构

相关文章：