购物街项目TabBar的封装

1.TabBar介绍

在购物街项目中 不论页面如何滚动 始终存在一个TabBar固定在该项目的底部 他在该项目中 扮演者选项卡栏的角色 内部存在若干选项 而选项中 固定存在两部分(图片+文本) 其中主要涉及到TabBar/TabBarItem这些和业务无关的共享组件(建议存放于components/common中)、MainTabBar这种和业务挂钩的共享组件(建议存放于components/content中)以及路由组件这种独立组件(建议存放于views中) 一些图片或者css资源则存放于assets中
在这里插入图片描述

2.TabBar组件的实现

1.js部分

在项目中 TabBar组件会因为内部活跃组件的不同而呈现不同的页面 因此 我们需要在该组件内部设计插槽 用于应对动态变化的内容

2.样式部分

①固定在底部的样式:需要通过固定定位+指定位置即可实现
②高度:一般选项卡栏的高度都默认为49px
③选项平分效果:需要设置展示方式为flex+插槽内部子元素flex:1(为插槽内部子元素设置样式 vue3的用法不同于vue2 他需要通过伪类选择器::v-slotted(xx)方可设置)
④阴影效果:通过box-shadow实现 其中每个取值从左到右依次为水平便宜方向、垂直偏移方向、模糊半径、偏移距离以及阴影颜色

3.TabBarItem组件的实现

1.js部分

在选项卡栏中 由于每一个选项都是各不相同的 所以说需要通过插槽来动态决定选项的内容
选项中 我们可以固定的分为两部分(图片+文本) 但是每一部分都是动态变化的 所以针对每一部分都需要设置插槽进行占位 到时候替换时 按照具名插槽的名称进行替换(在vue3中 插槽替换同样不同于vue2 他需要在替换内容的外部包裹template元素 并通过v-slot:xx指明具名插槽名称)

图片/文本都存在活跃/非活跃样式 其中 文本直接通过样式设置来切换活跃状态 但是图片不行 图片需要通过覆盖的方式来达到活跃状态的切换 因此我们还需要为选项卡栏再增加一部分内容 即活跃状态下的图片插槽 只不过 活跃状态下的图片插槽和非活跃状态下的图片插槽是互斥的关系(通过v-if实现)

至于v-if的判断条件 则需要通过isActive动态决定(他的值需要通过一段逻辑动态决定) 所以适合使用computed储存(data适用于储存静态值 而methods适合储存动态但没缓存的数据 而computed则适合储存动态但有缓存的数据)

isActive的逻辑具体是这样的:我们可以通过this.$route.path获取当前处于活跃状态的组件的url 然后我们的TabBarItem内部需要通过父传子的方式(props)获取父组件传递而来的link(即每一个组件都绑定着一个自身的url) 我们就可以通过this.$route.path和link进行一一匹配 知道匹配成功 就可知谁为活跃组件

isActive不仅仅应用于图片的活跃与否 还会应用于文本的应用与否 在文本中 我们会通过isActive来动态决定活跃样式是否作用 但是 为了体现良好的封装性(即用户只需要关心颜色样式的设置 而不需要关心颜色样式设置的过程) 我们的颜色应该交由外界动态决定 而非固定死在TabBarItem中 如此一来 我们就需要再次通过父传子(props)的方式设置颜色 但是 如果颜色样式内置于样式表中 就无法访问组件内部的js部分 因此 我们在设置样式时 需要通过内联样式(元素位置处)进行设置 内联样式中 颜色样式的设置同样需要通过逻辑来动态决定 所以我们为其在computed设置activeStyle来处理颜色

2.样式部分

①文本大小及文本/图片的水平居中效果(text-align水平居中可以为元素内部的文本以及图片生效)
②图片过于靠上问题解决:父子元素之间设置边距建议使用内边距处理 上内边距设置稍大 而下内边距设置稍小
③TabBarItem插槽内部图片子元素大小及垂直居中效果

4.TabBar/TabBarItem挂载到App组件

当我们的TabBar和TabBarItem封装完毕以后 我们就会在App组件中导入并使用 但是一股脑的存放于App组件中 内容未免过于庞大 因此的话 针对内容过多的情况 我们依然可以进行封装操作 我们将其封装为MainTabBar(注意导入操作也要一并移动到MainTabBar组件中)

在MainTabBar中 我们需要完成插槽的替换、子属性的设置以及路由跳转功能

在以前的vue2项目中 我们是通过绑定点击事件、触发路由的push/replace操作完成路由跳转需求的 但是现在的vue3项目中 我则是换一种方案实现路由跳转 即通过router-link包裹路由跳转的载体(TabBarItem) 并通过to设置跳转url

5.路由配置

1.vue-router的安装

如果你刚开始创建项目时 有勾选路由选项 那么就不需要执行这一步
我们可以通过npm install --save vue-router@4来下载vue-router(vue3对应的vue-router版本为4)

2.创建并配置router/index.js

如果你在项目创建伊始有勾选路由选项 那么这一步也不需要执行
我们手动创建router/index.js文件 由于我们的vue版本号为3 不同于vue2那样创建router对象
我们首先需要从vue-router中导入createRouter(用于创建router对象)以及createWebHistory(用于设置网页的前进后退)
接着以懒加载的方式导入路由组件(在应用时才从服务器加载 这样就避免了第一次加载时需要一次性加载很多内容 由于体积过大导致用户响应速度慢、浪费流量等等弊端)
然后我们创建routes 提前为我们的router对象设置参数(对象中变量参数的增强写法) 其中 我们需要配置的是若干对路由组件和url的映射关系
接着通过createRouter创建router对象 其中传入刚才设置好的routes以及通过createWebHistory去初始化history属性
最后导出router对象 并挂载到Vue实例中

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

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

相关文章

优化表单交互:在 el-select 组件中嵌入表格显示选项

介绍了一种通过 el-select 插槽实现表格样式数据展示的方案,可更直观地辅助用户选择。支持列配置、行数据绑定及自定义搜索,简洁高效,适用于复杂选择场景。完整代码见GitHub 仓库。 背景 在进行业务开发选择订单时,如果单纯的根…

最新Kali安装详细版教程(附安装包,傻瓜式安装教程)

本文主要详细介绍 kali 的安装过程,以及安装完成后的基本设置,比如安装增强工具,安装中文输入法以及更新升级等操作。 文章目录 实验环境准备工作步骤说明安装虚拟机安装 Kali安装增强工具安装中文输入法更新升级 实验环境 VMware &#x…

细说STM32单片机DMA中断收发RTC实时时间并改善其鲁棒性的方法

目录 一、DMA基础知识 1、DMA简介 (1)DMA控制器 (2)DMA流 (3)DMA请求 (4)仲裁器 (5)DMA传输属性 2、源地址和目标地址 3、DMA传输模式 4、传输数据量的大小 5、数据宽度 6、地址指针递增 7、DMA工作模式 8、DMA流的优先级别 9、FIFO或直接模式 10、单次传输或突…

H.265流媒体播放器EasyPlayer.js H5流媒体播放器如何验证视频播放是否走硬解

随着技术的不断进步和5G网络的推广,中国流媒体播放器行业市场规模以及未来发展趋势都将持续保持稳定的增长,并将在未来几年迎来新的发展机遇。流媒体播放器将继续作为连接内容创作者和观众的重要桥梁,推动数字媒体产业的创新和发展。 EasyPla…

仿Mybatis代码生成.获取索引信息

获取索引信息 1.核心思路 通过以下sql语句&#xff0c;例如对于user表 show index from user 执行结果如下: 2.实现 连接数据库后执行sql语句&#xff0c;我们重点关注下图标注的三个熟悉 代码如下: PreparedStatement ps null;ResultSet fieldResult null;List<Fiel…

【AI大模型】大型语言模型LLM基础概览:技术原理、发展历程与未来展望

目录 &#x1f354; 大语言模型 (LLM) 背景 &#x1f354; 语言模型 (Language Model, LM) 2.1 基于规则和统计的语言模型&#xff08;N-gram&#xff09; 2.2 神经网络语言模型 2.3 基于Transformer的预训练语言模型 2.4 大语言模型 &#x1f354; 语言模型的评估指标 …

详解八大排序(一)------(插入排序,选择排序,冒泡排序,希尔排序)

文章目录 前言1.插入排序&#xff08;InsertSort&#xff09;1.1 核心思路1.2 实现代码 2.选择排序&#xff08;SelectSort&#xff09;2.1 核心思路2.2 实现代码 3.冒泡排序&#xff08;BubbleSort&#xff09;3.1 核心思路3.2 实现代码 4.希尔排序&#xff08;ShellSort&…

如何在 Ubuntu 上使用 Docker 部署 LibreOffice Online

简介 LibreOffice Online&#xff08;也称为Collabora Online&#xff09;是一个开源的在线办公套件&#xff0c;它提供了与LibreOffice桌面版相似的功能&#xff0c;但完全在云端运行。这意味着用户可以通过浏览器访问和编辑文档&#xff0c;而无需在本地计算机上安装任何软件…

【人工智能】PyTorch、TensorFlow 和 Keras 全面解析与对比:深度学习框架的终极指南

文章目录 PyTorch 全面解析2.1 PyTorch 的发展历程2.2 PyTorch 的核心特点2.3 PyTorch 的应用场景 TensorFlow 全面解析3.1 TensorFlow 的发展历程3.2 TensorFlow 的核心特点3.3 TensorFlow 的应用场景 Keras 全面解析4.1 Keras 的发展历程4.2 Keras 的核心特点4.3 Keras 的应用…

macOS 无法安装第三方app,启用任何来源的方法

升级新版本 MacOS 后&#xff0c;安装下载的软件时&#xff0c;不能在 ”安全性与隐私” 中找不到 ”任何来源” 选项。 1. 允许展示任何来源 点击 启动器 (Launchpad) – 其他 (Other) – 终端 (Terminal)&#xff1a; 打开终端后&#xff0c;输入以下代码回车&#xff1a; …

Flutter:RotationTransition旋转动画

配置vsync&#xff0c;需要实现一下with SingleTickerProviderStateMixinclass _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{// 定义 AnimationController late AnimationController _controller;overridevoid initState() {super…

同步的意义以及机制

一、同步的意义 同步&#xff08;Synchronization&#xff09;的意义在于确保在多线程环境中&#xff0c;多个线程对共享资源的访问是安全的&#xff0c;避免竞争条件&#xff08;race conditions&#xff09;和数据不一致的情况。 具体来说&#xff0c;同步的核心目标是&…

第二十四章 Spring之源码阅读——AOP篇

Spring源码阅读目录 第一部分——IOC篇 第一章 Spring之最熟悉的陌生人——IOC 第二章 Spring之假如让你来写IOC容器——加载资源篇 第三章 Spring之假如让你来写IOC容器——解析配置文件篇 第四章 Spring之假如让你来写IOC容器——XML配置文件篇 第五章 Spring之假如让你来写…

C++语言之STL

STL STL是标准模板库,是惠普实验室开发的一系列软件的统称 STL的6大组件 容器 算法 迭代器 仿函数 适配器 空间适配器 容器 作用:容纳存储的数据 分类: 序列式容器: 强调值的顺序,每个元素均有固定的位置,除非用删除或插入的操作改变这个位置,如vector,deque/queue,list; 关联式…

嵌入式实验报告:家用计时器

实验目的和要求 1、实验目的 掌握STM32串口通信原理。学习编程实现STM32的UART通信掌握STM32中断程序设计流程。熟悉STM32固件库的基本使用。熟悉STM32定时器中断设计流程。2、实验要求 设计一个家用计时器,其功能如下: 利用串口设置计时时间,格式:XX:XX:X 例如01:59:…

阿里巴巴官方「SpringCloudAlibaba全彩学习手册」限时开源!

最近我在知乎上看过的一个热门回答&#xff1a; 初级 Java 开发面临的最大瓶颈在于&#xff0c;脱离不出自身业务带来的局限。日常工作中大部分时间在增删改查、写写接口、改改 bug&#xff0c;久而久之就会发现&#xff0c;自己的技术水平跟刚工作时相比没什么进步。 所以我们…

低成本搭建单相220V转三相380V变频器配滤波器的转换器

一、单相转三相的迫切需求 在许多工业和商业场景中&#xff0c;三相电源因其高效、稳定的特性而被广泛应用。然而&#xff0c;并非所有场所都能提供三相电源&#xff0c;尤其是在一些老旧建筑或偏远地区&#xff0c;单相220V电源更为常见。这就迫切需要我们找到一种有效的转换…

如何从 VMware 官网下载最新版本的 VMware Workstation

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 下载VMware 📒📝 操作步骤🎈 获取方式 🎈⚓️ 相关链接 ⚓️📖 介绍 📖 你是否曾尝试从 VMware 官网下载 VMware Workstation,但总是被繁杂的选择和复杂的操作困扰?VMware 提供的产品种类繁多,而且官网页面设计复…

数据结构_图的遍历

深度优先搜索遍历 遍历思想 邻接矩阵上的遍历算法 void Map::DFSTraverse() {int i, v;for (i 0; i < MaxLen; i){visited[i] false;}for (i 0; i < Vexnum; i){// 如果顶点未访问&#xff0c;则进行深度优先搜索if (visited[i] false){DFS(i);}}cout << endl…

基于CVE安全公告号,全面修复麒麟ARM系统OpenSSH漏洞

前言&#xff1a;负责的其中一个从0开始搭建的某生产项目上线前需要做青藤安全扫描&#xff0c;过了后才允许上线&#xff0c;该项目从操作系统、中间件、数据库、容器等全国产信创化&#xff0c;公司公告为CVE安全公告号&#xff0c;而修复漏洞的责任归我&#xff0c;需要根据…