uniapp 小兔鲜儿 - 首页模块(1)

目录

自定义导航栏

静态结构

安全区域​

通用轮播组件

静态结构

自动导入全局组件

全局组件类型声明

 .d.ts文件

 注册组件

 @vue/runtime-core 

首页 – 轮播图指示点 

首页 – 获取轮播图数据

首页 – 轮播图数据类型并渲染

首页 – 轮播图总结

首页分类

首页 – 前台分类组件

首页 – 获取前台分类数据

首页 – 前台分类数据类型并渲染


自定义导航栏

参考效果:自定义导航栏的样式需要适配不同的机型。

操作步骤

  1. 准备组件

  2. 隐藏默认导航栏,修改文字颜色

  3. 样式适配 -> 安全区域

静态结构

新建业务组件:src/pages/index/componets/CustomNavbar.vue

<script setup lang="ts">
//
</script><template><view class="navbar"><!-- logo文字 --><view class="logo"><image class="logo-image" src="@/static/images/logo.png"></image><text class="logo-text">新鲜 · 亲民 · 快捷</text></view><!-- 搜索条 --><view class="search"><text class="icon-search">搜索商品</text><text class="icon-scan"></text></view></view>
</template><style lang="scss">
/* 自定义导航条 */
.navbar {background-image: url(@/static/images/navigator_bg.png);background-size: cover;position: relative;display: flex;flex-direction: column;padding-top: 20px;.logo {display: flex;align-items: center;height: 64rpx;padding-left: 30rpx;.logo-image {width: 166rpx;height: 39rpx;}.logo-text {flex: 1;line-height: 28rpx;color: #fff;margin: 2rpx 0 0 20rpx;padding-left: 20rpx;border-left: 1rpx solid #fff;font-size: 26rpx;}}.search {display: flex;align-items: center;justify-content: space-between;padding: 0 10rpx 0 26rpx;height: 64rpx;margin: 16rpx 20rpx;color: #fff;font-size: 28rpx;border-radius: 32rpx;background-color: rgba(255, 255, 255, 0.5);}.icon-search {&::before {margin-right: 10rpx;}}.icon-scan {font-size: 30rpx;padding: 15rpx;}
}
</style>

安全区域​

不同手机的安全区域不同,适配安全区域能防止页面重要内容被遮挡。

可通过 uni.getSystemInfoSync() 获取屏幕边界到安全区的距离。

核心代码参考

自定义导航配置

// src/pages.json
{"path": "pages/index/index","style": {"navigationStyle": "custom", // 隐藏默认导航"navigationBarTextStyle": "white","navigationBarTitleText": "首页"}
}

组件安全区适配

<!-- src/pages/index/componets/CustomNavbar.vue -->
<script>
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script><template><!-- 顶部占位 --><view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"><!-- ...省略 --></view>
</template>

通用轮播组件

参考效果

小兔鲜儿项目中总共有两处广告位,分别位于【首页】和【商品分类页】。

轮播图组件需要在首页和分类页使用,需要封装成通用组件。

静态结构

首页广告布局为独立的组件 XtxSwiper ,位于的 src/components 目录中。

该组件定义了 list 属性接收外部传入的数据,内部通过小程序内置组件 swiper 展示首页广告的数据。

轮播图组件

静态结构:src/components/XtxSwiper.vue

<script setup lang="ts">
import { ref } from 'vue'const activeIndex = ref(0)
</script><template><view class="carousel"><swiper :circular="true" :autoplay="false" :interval="3000"><swiper-item><navigator url="/pages/index/index" hover-class="none" class="navigator"><imagemode="aspectFill"class="image"src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_1.jpg"></image></navigator></swiper-item><swiper-item><navigator url="/pages/index/index" hover-class="none" class="navigator"><imagemode="aspectFill"class="image"src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_2.jpg"></image></navigator></swiper-item><swiper-item><navigator url="/pages/index/index" hover-class="none" class="navigator"><imagemode="aspectFill"class="image"src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/slider_3.jpg"></image></navigator></swiper-item></swiper><!-- 指示点 --><view class="indicator"><textv-for="(item, index) in 3":key="item"class="dot":class="{ active: index === activeIndex }"></text></view></view>
</template><style lang="scss">
:host {display: block;height: 280rpx;
}
/* 轮播图 */
.carousel {height: 100%;position: relative;overflow: hidden;transform: translateY(0);background-color: #efefef;.indicator {position: absolute;left: 0;right: 0;bottom: 16rpx;display: flex;justify-content: center;.dot {width: 30rpx;height: 6rpx;margin: 0 8rpx;border-radius: 6rpx;background-color: rgba(255, 255, 255, 0.4);}.active {background-color: #fff;}}.navigator,.image {width: 100%;height: 100%;}
}
</style>

自动导入全局组件

参考配置

{// 组件自动引入规则"easycom": {// 是否开启自动扫描 @/components/$1/$1.vue 组件"autoscan": true,// 以正则方式自定义组件匹配规则"custom": {// uni-ui 规则如下配置"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",// 以 Xtx 开头的组件,在 components 目录中查找"^Xtx(.*)": "@/components/Xtx$1.vue"}}
}

全局组件类型声明

 .d.ts文件

在 TypeScript 中,.d.ts 文件是用来描述 JavaScript 模块或库的声明文件。这些声明文件用于提供类型信息,使得 TypeScript 在引用外部 JavaScript 库时可以获得类型检查和代码提示的支持。

声明文件通常以.d.ts为扩展名,并与相应的 JavaScript 文件相对应。它们用于描述库的类型定义和类型推断规则,以及函数、类、接口和变量的声明。

下面是一个用于声明一个简单 JavaScript 模块的 .d.ts 文件的示例:

// myModule.d.ts// 导出一个函数的声明
export function myFunction(param: string): void;// 导出一个类的声明
export class MyClass {constructor(name: string);sayHello(): void;
}// 导出一个接口的声明
export interface MyInterface {id: number;name: string;
}// 导出一个变量的声明
export const myVariable: number;

在上述例子中,我们声明了一个名为myModule的模块,其中包含一个导出函数myFunction,一个导出类MyClass,一个导出接口MyInterface和一个导出变量myVariable

这个声明文件可以被其他 TypeScript 文件引入和使用:

// index.tsimport { myFunction, MyClass, MyInterface, myVariable } from './myModule';myFunction('Hello'); // 类型检查
const instance = new MyClass('John'); // 类型检查
instance.sayHello(); // 类型检查
const obj: MyInterface = { id: 1, name: 'John' }; // 类型检查
console.log(myVariable); // 类型检查

通过引入声明文件,TypeScript 可以提供类型检查和自动补全的功能,从而帮助开发者在编写代码过程中减少错误,并提高代码的可维护性。

总结来说,.d.ts 文件是用来提供 JavaScript 模块或库的类型信息的。它们描述了函数、类、接口和变量的声明,使得 TypeScript 能够对外部 JavaScript 代码进行类型检查和代码提示。

 注册组件

Volor 插件说明:Vue Language Toolshttps://github.com/vuejs/language-tools

这段代码是一个声明模块的代码,它引入了一个名为XtxSwiper的Vue组件,并将其注册为全局组件。具体来说,代码的功能如下:

  1. import XtxSwiper from './XtxSwiper.vue':这行代码引入了一个名为XtxSwiper的Vue组件,该组件可能是一个图片轮播组件或其他类型的组件。

  2. declare module '@vue/runtime-core':这行代码声明了一个模块,并指定其名称为"@vue/runtime-core"。

  3. { export interface GlobalComponents { XtxSwiper: typeof XtxSwiper } }:这行代码在声明的模块中定义了一个接口GlobalComponents,该接口包含了一个XtxSwiper属性。这个XtxSwiper属性的类型是typeof XtxSwiper,表示它与之前引入的XtxSwiper组件具有相同的类型。

// src/types/components.d.ts
import XtxSwiper from './XtxSwiper.vue’
declare module '@vue/runtime-core' {export interface GlobalComponents {XtxSwiper: typeof XtxSwiper}
}

 @vue/runtime-core 

@vue/runtime-core 是 Vue.js 框架的运行时核心库。在 Vue.js 中,有两个主要的库:编译时(compiler)和运行时(runtime)。编译时负责将模板转换为渲染函数,而运行时则负责实际的渲染、组件管理等。

@vue/runtime-core 是 Vue 3 中运行时的核心部分,它包含了实际执行渲染、响应式系统、虚拟 DOM 和其他运行时相关的功能。Vue 3 使用了模块化的方式来组织这些功能,因此你会在代码中看到像 @vue/runtime-core 这样的模块引用。

在你的代码示例中,通过声明模块 @vue/runtime-core,你可以扩展 Vue 运行时的全局类型和功能,以便让类型检查器和编辑器能够正确地理解和处理这些扩展。具体到你的代码,它在全局注册了一个名为 XtxSwiper 的组件,使得在整个应用中都可以直接使用这个组件,而不需要在每个单独的组件中都进行导入和注册。

首页 – 轮播图指示点 

知识点:
  • UniHelper 提供事件类型,文档说明
  • (可选链) 允许前面表达式为空值
  • (非空断言) 主观上排除掉空值情况
    <view class="indicator"><textv-for="(item, index) in 3":key="item"class="dot":class="{ active: index === activeIndex }"></text></view>
const activeIndex = ref(0);
const onChange: UniHelper.SwiperOnChange = (ev) => {// ! 非空断言,主观上排除掉空值情况activeIndex.value = ev.detail!.current;
};

首页 – 获取轮播图数据

1. 封装获取轮播图数据API
export const getHomeBannerAPI = (distributionSite = 1) => {return http<BannerItem[]>({method: 'GET',url: '/home/banner',data: {distributionSite,},})
}

2. 页面初始化调用API
import { onLoad } from '@dcloudio/uni-app'
import { getHomeBannerAPI } from '@/services/home'
import type { BannerItem } from '@/types/home'
import { ref } from 'vue'
const bannerList = ref<BannerItem[]>([])
const getHomeBannerData = async () => {const res = await getHomeBannerAPI()console.log(res)bannerList.value = res.resultconsole.log(bannerList.value)
}
onLoad(() => {getHomeBannerData()
})

首页 – 轮播图数据类型并渲染

1. 定义轮播图数据类型
/** 首页-广告区域数据类型 */
export type BannerItem = {/** 跳转链接 */hrefUrl: string/** id */id: string/** 图片链接 */imgUrl: string/** 跳转类型 */type: number
}

2. 指定类型并传值给子组件
<XtxSwiper :list="bannerList" />

3. 渲染轮播图数据

defineProps<{list: BannerItem[]
}>()<swiper:circular="true":autoplay="false":interval="3000"@change="onChange"><swiper-item v-for="item in list" :key="item.id"><navigatorurl="/pages/index/index"hover-class="none"class="navigator"><image mode="aspectFill" class="image" :src="item.imgUrl"></image></navigator></swiper-item></swiper>

首页 – 轮播图总结

首页分类

首页 – 前台分类组件

1677150782440

准备工作

  1. 准备组件,只有首页使用

前台类目布局为独立的组件 CategoryPanel属于首页的业务组件,存放到首页的 components 目录中。

<script setup lang="ts">
//
</script><template><view class="category"><navigatorclass="category-item"hover-class="none"url="/pages/index/index"v-for="item in 10":key="item"><imageclass="icon"src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/nav_icon_1.png"></image><text class="text">居家</text></navigator></view>
</template><style lang="scss">
/* 前台类目 */
.category {margin: 20rpx 0 0;padding: 10rpx 0;display: flex;flex-wrap: wrap;min-height: 328rpx;.category-item {width: 150rpx;display: flex;justify-content: center;flex-direction: column;align-items: center;box-sizing: border-box;.icon {width: 100rpx;height: 100rpx;}.text {font-size: 26rpx;color: #666;}}
}
</style>
  1. 导入并使用组件
import CategoryPanel from "./componets/CategoryPanel.vue";<CategoryPanel />
  1. 设置首页底色为 #F7F7F7
<style lang="scss">
page {background-color: #f7f7f7;
}
</style>

首页 – 获取前台分类数据

1. 封装获取前台分类数据API

/*** 首页-前台分类-小程序*/
export const getHomeCategoryAPI = () => {return http<CategoryItem[]>({method: 'GET',url: '/home/category/mutli',})
}


2. 页面初始化调用API

import type {  CategoryItem } from "@/types/home";
import { getHomeCategoryAPI } from "@/services/home";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
const categoryList = ref<CategoryItem[]>([]);
const getHomeCategoryData = async () => {const res = await getHomeCategoryAPI();categoryList.value = res.result;console.log(res);
};
onLoad(() => {getHomeCategoryData();
});

首页 – 前台分类数据类型并渲染

1. 定义前台分类数据类型

export type CategoryItem = {/** 图标路径 */icon: string/** id */id: string/** 分类名称 */name: string
}


2. 指定类型并传值给子组件

  <CategoryPanel :list="categoryList" />

import type { CategoryItem } from "@/types/home";
defineProps<{list: CategoryItem[];
}>();


3. 渲染前台分类数据

  <view class="category"><navigator class="category-item" v-for="item in list" :key="item.id"><image class="icon" :src="item.icon" mode="aspectFit"></image><text class="text">{{ item.name }}</text></navigator></view>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/87127.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RocketMQ 延迟消息

RocketMQ 延迟消息 RocketMQ 消费者启动流程 什么是延迟消息 RocketMQ 延迟消息是指&#xff0c;生产者发送消息给消费者消息&#xff0c;消费者需要等待一段时间后才能消费到。 使用场景 用户下单之后&#xff0c;15分钟未支付&#xff0c;对支付账单进行提醒或者关单处理…

推荐 4 个 yyds 的 GitHub 项目

本期推荐开源项目目录&#xff1a; 1. 开源的 Markdown 编辑器 2. MetaGPT 3. SuperAGI 4. 一个舒适的笔记平台 01 开源的 Markdown 编辑器 Cherry 是腾讯开源的 Markdown 编辑器&#xff0c;基于 Javascript具有轻量简洁、易于扩展等特点&#xff0c; 它可以运行在浏览器或服…

【C语言】进阶指针,超详解,含丰富代码示例

文章目录 前言指针进阶的重点内容1.字符指针2.数组指针3.指针数组4.函数指针5.函数指针数组6. 指向函数指针数组的指针 总结 这里是初阶的链接&#xff0c;方便大家对照查看&#xff01;&#xff01;&#xff01;添加链接描述 前言 大家好呀&#xff0c;今天和大家将指针进阶…

【Linux】网络基础2

文章目录 网络基础21. 应用层1.1 协议1.2 HTTP 协议1.2.1 URL1.2.2 urlencode和urldecode1.2.3 HTTP协议格式1.2.4 HTTP的方法1.2.5 HTTP的状态码1.2.6 HTTP 常见的header1.2.7 最简单的HTTP服务器 2. 传输层2.1 端口号2.1.1 端口号范围划分2.1.2 认识知名端口号2.1.3 netstat2…

RISC-V走向开放服务器规范

原文&#xff1a;RISC-V Moving Toward Open Server Specification 作者&#xff1a;Agam Shah 转载自&#xff1a;https://www.hpcwire.com/2023/07/24/risc-v-moving-toward-open-server-specification/ 中文翻译&#xff1a; 2023年7月24日 RISC-V International目前正…

Android之消除APP图标的白色边框

有问题的效果&#xff1a; 解决方案&#xff1a; 第一步&#xff1a;app右键—>new—>Image Asset 第二步&#xff1a;上传Logo图标&#xff0c;选择每种分辨率&#xff0c;预览看效果&#xff0c;选择Resize&#xff0c;可以微调 第三步&#xff1a;点击 Next&#xff…

pytest-xdist分布式测试原理浅析

目录 pytest-xdist执行流程&#xff1a; pytest-xdist 模块结构&#xff1a; pytest-xdist分布式测试原理&#xff1a; pytest-xdist源码浅读&#xff1a; pytest-xdist执行流程&#xff1a; 解析命令行参数&#xff1a;pytest-xdist 会解析命令行参数&#xff0c;获取用户…

K8s环境下监控告警平台搭建及配置

Promethues是可以单机搭建的&#xff0c;参考prometheus入门[1] 本文是就PromethuesGrafana在K8s环境下的搭建及配置 Prometheus度量指标监控平台简介 启动minikube minikube start 安装helm 使用Helm Chart 安装 Prometheus Operator: helm install prometheus-operator stabl…

idea找不到DataBase

一、我想把数据库跟我的idea链接&#xff0c;结果发现找不到。如图。 二、解决方案 找到 file ---setting 找到plugin------找到marketplace 我的已经出现了

Jmeter入门之digest函数 jmeter字符串连接与登录串加密应用

登录请求中加密串是由多个子串连接&#xff0c;再加密之后传输。 参数连接&#xff1a;${var1}${var2}${var3} 加密函数&#xff1a;__digest &#xff08;函数助手里如果没有该函数&#xff0c;请下载最新版本的jmeter5.0&#xff09; 函数助手&#xff1a;Options > …

EMQX物联网竟然用这个?(一)——简介

一、前言 我们这些年&#xff0c;“物联网”这个名称越来越被大家所知道了。 物联网 &#xff08;Internet of things&#xff09;&#xff0c;简称 IoT&#xff0c;这个概念在1991年就被漂亮国提出来了&#xff0c;解释一下就是万物可以通过互联网连接起来&#xff0c;可以进…

通用FIR滤波器的verilog实现(内有Lowpass、Hilbert参数生成示例)

众所周知&#xff0c;Matlab 中的 Filter Designer 可以直接生成 FIR 滤波器的 verilog 代码&#xff0c;可以方便地生成指定阶数、指定滤波器参数的高通、低通、带通滤波器&#xff0c;生成的 verilog 代码也可以指定输入输出信号的类型和位宽。然而其生成的代码实在算不上美观…

掌握 JVM 调优命令

常用命令 1、jps查看当前 java 进程2、jinfo实时查看和调整 JVM 配置参数3、jstat查看虚拟机统计信息4、jstack查看线程堆栈信息5、jmap查看堆内存的快照信息 JVM 日常调优总结起来就是&#xff1a;首先通过 jps 命令查看当前进程&#xff0c;然后根据 pid 通过 jinfo 命令查看…

c语言——完数的计算

完数即所有因子之和等于其本身值 列入&#xff0c;28124714&#xff0c;28所有的因子为1&#xff0c;2&#xff0c;4&#xff0c;7&#xff0c;14 而这五个因子之和恰好也是28. //完数的计算 /*完数即所有因子之和等于其本身值 列入&#xff0c;28124714&#xff0c;28所有的…

取证--理论

资料&#xff1a; 各比赛 Writeup &#xff1a; https://meiyacup.cn/Mo_index_gci_36.html 哔站比赛复盘视频&#xff1a; https://space.bilibili.com/453117423?spm_id_from333.337.search-card.all.click 自动分析取证四部曲 新建案例添加设备自动取证制作报告 取证大…

图片预览插件vue-photo-preview的使用

移动端项目中需要图片预览的功能&#xff0c;但本身使用mintui&#xff0c;vantui中虽然也有&#xff0c;但是为了一个组件安装这个有点儿多余&#xff0c;就选用了vue-photo-preview插件实现&#xff08;其实偷懒也不想自己写&#xff09;。 1、安装 npm i vue-photo-preview…

宋浩高等数学笔记(十一)曲线积分与曲面积分

个人认为同济高数乃至数学一中最烧脑的一章。。。重点在于计算方式的掌握&#xff0c;如果理解不了可以暂时不强求&#xff0c;背熟积分公式即可。此外本贴暂时忽略两类曲面积分之间的联系&#xff0c;以及高斯公式的相关内容&#xff0c;日后会尽快更新&#xff0c;争取高效率…

安装Qt选择组件

最近在做Qt相关的开发&#xff0c;首先搭建开发环境&#xff0c;刚开始对组件这块不是很熟悉&#xff0c;需要了解这方面的知识&#xff0c;写下来主要是方便记住关于选择组件的说明&#xff0c;Qt版本是最新的长期维护版本&#xff0c;版本号&#xff1a;6.5.2 一、选择要安装…

C# Linq源码分析之Take方法

概要 Take方法作为IEnumerable的扩展方法&#xff0c;具体对应两个重载方法。本文主要分析第一个接收整数参数的重载方法。 源码解析 Take方法的基本定义 public static System.Collections.Generic.IEnumerable Take (this System.Collections.Generic.IEnumerable source…

Easys Excel的表格导入(读)导出(写)-----java

一,EasyExcel官网: 可以学习一些新知识: EasyExcel官方文档 - 基于Java的Excel处理工具 | Easy Excel 二,为什么要使用easyexcle excel的一些优点和缺点 java解析excel的框架有很多 &#xff1a; poi jxl,存在问题&#xff1a;非常的消耗内存&#xff0c; easyexcel 我们…