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

uniapp商城之首页模块

文章目录

  • 前言
  • 一、自定义导航栏
    • 1.静态结构
    • 2.修改页面配置
    • 3.组件安全区适配
  • 二、通用轮播组件
    • 1. 静态结构组件
    • 2.自动导入全局组件
    • 3.首页轮播图数据获取
  • 三、首页分类
    • 1.静态结构
    • 2.首页获取分类数据并渲染
  • 四、热门推荐
    • 1.静态结构
    • 2.首页获取推荐数据并渲染
    • 3.首页跳转详细推荐页
  • 五、猜你喜欢
    • 1.静态结构
    • 2.核心业务
  • 六、下拉刷新
  • 七、骨架屏


前言

主要涉及到组件通信、组件自动导入、数据渲染、触底分页加载、下拉刷新等。
在这里插入图片描述


一、自定义导航栏

自定义导航栏的样式需要适配不同的机型。
在这里插入图片描述
操作步骤

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

相关文章:

uniapp商城之首页模块

文章目录 前言一、自定义导航栏1.静态结构2.修改页面配置3.组件安全区适配二、通用轮播组件1. 静态结构组件2.自动导入全局组件3.首页轮播图数据获取三、首页分类1.静态结构2.首页获取分类数据并渲染四、热门推荐1.静态结构2.首页获取推荐数据并渲染3.首页跳转详细推荐页五、猜…...

【Javascript Day13、14、15、16】

html的DOM操作 // JS 是为了让页面实现动态网页效果 // 动态和静态区分取决于JS的和页面标签的数据交互 // 动态网页&#xff1a;有数据交互 // 静态网页&#xff1a;无数据交互 // JS 和 元素的关联操作对象 DOM // 整个HT…...

linux 板子的wifi模块连上路由器后,用udhcpc给板子wifi分配ip,udhcpc获取到ip,但没有写入wlan0网卡上

linux 板子的wifi模块连上路由器后&#xff0c;用udhcpc给板子wifi分配ip&#xff0c;udhcpc获取到ip,但没有写入wlan0网卡上 这里的问题是 /usr/share/udhcpc/default.script脚本有问题 用下面正确脚本&#xff0c;即可写进去 #!/bin/sh# udhcpc script for busybox # Copyr…...

openGauss 3.0 数据库在线实训课程13: 学习逻辑结构:表管理1

前提 我正在参加21天养成好习惯| 第二届openGauss每日一练活动 课程详见&#xff1a;openGauss 3.0.0数据库在线实训课程 学习目标 学习openGauss表的创建、搜索路径和访问方法等 课程作业 1.创建一个表&#xff08;默认&#xff0c;不指定模式&#xff09;&#xff0c;查…...

网络编程-

文章目录 网络编程套接字UDP/TCP的api使用 网络编程套接字 socket&#xff0c;是操作系统给应用程序&#xff08;传输层给应用层&#xff09;提供的api&#xff0c;Java也对这个api进行了封装。 socket提供了两组不同的api&#xff0c;UDP有一套&#xff0c;TCP有一套&#x…...

基于单片机的常规肺活量SVC简单计算

常规肺活量 SVC&#xff08;Slow Vital Capacity&#xff09;是指尽力吸气后缓慢而又完全呼出的最大气量。 成年男性的肺活量通常在 3500-4000ml 之间&#xff0c;成年女性的肺活量通常在 2500-3000ml 之间。 单片机一般通过外接流量传感器&#xff0c;使用ADC高速采集的方式…...

【PostgreSQL】PG在windows下的安装

一、准备 通过官网下载安装文件&#xff0c;官方下载路径如下&#xff1a; https://www.postgresql.org/download/windows/ 二、安装 双击postgresql-17.3-1-windows-x64.exe文件&#xff0c;启动安装&#xff0c;进入安装步骤&#xff0c;点击Next 选择PG安装路径&#xff…...

电动汽车电池监测平台系统设计(论文+源码+图纸)

1总体设计 本次基于单片机的电池监测平台系统设计&#xff0c;其整个系统架构如图2.1所示&#xff0c;其采用STC89C52单片机作为控制器&#xff0c;结合ACS712电流传感器、TLC1543模数转换器、LCD液晶、DS18B20温度传感器构成整个系统&#xff0c;在功能上可以实现电压、电流、…...

基于和声搜索(Harmony Search, HS)的多中心点选址优化算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于和声搜索(Harmony Search, HS)的多中心点选址优化算法matlab仿真。可以设置多个不同的中心点。 2.测试软件版本以及运行结果展示 matlab2022a/matlab2024b版…...

单链表的概念,结构和优缺点

1. 概念 链表是一种物理存储结构上非连续&#xff0c;非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接次序实现的。 2. 单链表的结构 单链表是由一系列节点组成的线性结构&#xff0c;每个结点包含两个域。&#xff1a;数据域和指针域。 数据域用来…...

SpringBoot+数据可视化的奶茶点单购物平台(程序+论文+讲解+安装+调试+售后)

感兴趣的可以先收藏起来&#xff0c;还有大家在毕设选题&#xff0c;项目以及论文编写等相关问题都可以给我留言咨询&#xff0c;我会一一回复&#xff0c;希望帮助更多的人。 系统介绍 本奶茶点单购物平台搭建在 Spring Boot 框架之上&#xff0c;充分利用其强大的依赖管理机…...

深入理解 Vue3 中 ref 与 reactive 的区别及应用

深入理解 Vue3 中 ref 与 reactive 的区别及应用 在 Vue3 的开发世界里&#xff0c;响应式编程是其核心特性之一&#xff0c;而ref与reactive作为实现响应式的关键 API&#xff0c;理解它们的区别和适用场景对于开发者来说至关重要。本文将带你深入剖析这两个 API&#xff0c;…...

TDengine 客户端连接工具 taos-Cli

简介工具获取运行命令行参数 基础参数高级参数 数据导出/导入 数据导出数据导入 执行 SQL 脚本使用小技巧 TAB 键自动补全设置字符列显示宽度其它 错误代码表 简介 TDengine 命令行工具&#xff08;以下简称 TDengine CLI&#xff09;是用户操作 TDengine 实例并与之交互最简…...

Linux(ubuntu)下载ollama速度慢解决办法

国内安装Ollama都很慢&#xff0c;因为一直卡在下载中&#xff0c;直接通过官网的链接地址下载方法&#xff1a; curl -fsSL https://ollama.com/install.sh | sh速度大概是10min下载1%&#xff0c;完全不能接受啊&#xff01; 其中很好的一个加速方式是通过使用github文件加速…...

Mac安装JD-GUI

Mac安装反编译工具步骤如下&#xff1a; 打开官网https://java-decompiler.github.io/ 选择下载mac的安装包解压下载好的压缩包&#xff0c;点击JD-GUI安装 有可能会遇到如下错误。请先检查是否安装JDK&#xff0c;通过java -version命令查看是否是1.8版本的jdk如果jdk没问题&…...

Jenkins 配置 Git Parameter 四

Jenkins 配置 Git Parameter 四 一、开启 项目参数设置 勾选 This project is parameterised 二、添加 Git Parameter 如果此处不显示 Git Parameter 说明 Jenkins 还没有安装 Git Parameter plugin 插件&#xff0c;请先安装插件 Jenkins 安装插件 三、设置基本参数 点击…...

【AI】Docker中快速部署Ollama并安装DeepSeek-R1模型: 一步步指南

【AI】Docker中快速部署Ollama并安装DeepSeek-R1模型: 一步步指南 一、前言 为了确保在 Docker 环境中顺利安装并高效运行 Ollama 以及 DeepSeek 离线模型&#xff0c;本文将详细介绍整个过程&#xff0c;涵盖从基础安装到优化配置等各个方面。通过对关键参数和配置的深入理解…...

Python 自然语言处理(NLP)和文本挖掘的常规操作过程

Python 自然语言处理&#xff08;NLP&#xff09;和文本挖掘 自然语言处理&#xff08;NLP&#xff09;和文本挖掘是数据科学中的重要领域&#xff0c;涉及对文本数据的分析和处理。Python 提供了丰富的库和工具&#xff0c;用于执行各种 NLP 和文本挖掘任务。以下是一些常见的…...

传统数组 vs vector和list

传统的数组&#xff1a; int arr[10]&#xff1b; 传统的数组有以下的缺点&#xff1a; 1&#xff09;长度不可修改 2)内存分配 局部数组:把数组定在函数内&#xff0c; 数组便是局部变量&#xff0c;故会被分配在栈上 但栈的大小是有限制的 &#xff0c;故其在内存中不能超…...

CRMEB 多商户版v3.0.1源码全开源+PC端+Uniapp前端+搭建教程

一.介绍 crmeb多商户是一套B2B2C商家入驻模式的平台多商户商城系统&#xff0c;系统支持平台自营、联营、招商等多种运营模式&#xff0c;可满足企业新零售、批发、分销、预售、O2O、多店、商铺入驻等各种业务需求。 后端全开源、uniapp多端可编译&#xff01; 二、搭建教程…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...