购物街项目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 的应用…

C++详细笔记(六)string库

1.介绍STL库 C STL&#xff08;Standard Template Library&#xff0c;标准模板库&#xff09;是 C 标准库的一部分&#xff0c;它提供了一系列通用的模板类和函数&#xff0c;大大方便了 C 程序员的开发工作 优点 代码复用性高&#xff1a;可以直接使用 STL 中的容器、算法…

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

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

笔记记录 k8s操作

docker下载arm架构的镜像 docker pull centos --platform arm64 其中华为鲲鹏、飞腾CPU采用的是ARM架构,龙芯采用的是MIPS架构,而兆芯、海光CPU采用的是X86架构,申威采用的是Alpha架构 docker查看容器的日志文件目录 docker inspect --format={{.LogPath}} containername…

Flutter实现气泡提示框学习

前置知识点学习 GlobalKey GlobalKey 是 Flutter 中一个非常重要的概念&#xff0c;它用于唯一标识 widget 树中的特定 widget&#xff0c;并提供对该 widget 的访问。这在需要跨越 widget 树边界进行交互或在 widget 树重建时保持状态时尤其有用。 GlobalKey 的作用 唯一标…

hadoop3.x 新特性

hadoop3.x 新特性 FeaturesHadoop 2.xHadoop 3.xMinimum Required Java VersionJDK 6 and above.JDK 8 is the minimum runtime version of JAVA required to run Hadoop 3.x as many dependency library files have been used from JDK 8.Fault ToleranceFault Tolerance is …

系统性能优化方法论详解:从理解系统到验证迭代

在当今的企业级和云计算环境中&#xff0c;系统性能优化已成为提升竞争力的关键因素。本文将对系统优化的步骤进行深入解析&#xff0c;帮助读者系统化地进行性能优化&#xff0c;从而显著提升系统的整体表现。 流程概述: 系统性能优化的流程可以分为以下几个关键步骤&#x…

国内docker pull拉取镜像的解决方法

访问网站&#xff0c;查找该网站上可用的镜像源&#xff0c;然后替换掉下面代码中的hub-mirror.c.163.com&#xff1a; docker pull hub-mirror.c.163.com/library/nginx:latest 另外&#xff0c;进入到镜像之后&#xff0c;可以使用下面的命令查看操作系统版本。 lsb_releas…

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之假如让你来写…

每日一题&移动语义

每日一题 无重复字符的最长子串 class Solution { public:int lengthOfLongestSubstring(string s) {/*利用set的特性&#xff0c;set中不能有重复的元素&#xff0c;所以可以用set来判断是否有重复的元素然后用两个指针i和j来表示子串的左右边界&#xff0c;然后用ans来记录…