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

Vue 导航条+滑块效果

目录

    • 前言
    • 代码效果展示
    • 导航实现代码
      • 导航实现代码
      • 导航应用代码

前言

    总结一个最近开发的需求。设计稿里面有一个置顶的导航条,要求在激活的项目下面展示个下划线。我最先开始尝试的是使用 after 的伪类选择器,直接效果一样,但是展示的时候就会闪现变化,感觉不够自然,参考了一下其他网站的设计,最终选择将下划线改成一个可以随着导航项内容长度自动变换的div,并添加了滑块效果。

代码效果展示

    为了图方便,我就写了主页和欢迎语两个路由内的内容,其他都页面都没写,不过效果倒是不影响。

在这里插入图片描述

导航实现代码

导航实现代码

    这里的导航条内容封装在Header内容中

<template><div class="header-container"><!-- 导航内容 --><ul class="navigate-box"><li class="navigate-item" v-for="(item,key) in navList" :key="key" @click=" navHoverID = item.id "><router-link v-if="item.path" :to="item.path">{{item.name}}</router-link><!-- 因为这里的页面3-页面5具体路由组件没有填写,这里为了导航项滑块效果,就先用span代替一下--><span class="item" v-else>{{item.name}}</span></li><div class="trigger disabled" :style="slider()"></div></ul></div>
</template><script>
export default {name: 'Header',data() {return{navList:[{id:0, name: "主页", path: "/homepage"}

相关文章:

Vue 导航条+滑块效果

目录 前言代码效果展示导航实现代码导航实现代码导航应用代码前言 总结一个最近开发的需求。设计稿里面有一个置顶的导航条,要求在激活的项目下面展示个下划线。我最先开始尝试的是使用 after 的伪类选择器,直接效果一样,但是展示的时候就会闪现变化,感觉不够自然,参考了一…...

Android:使用Gson常见问题(包含解决将Long型转化为科学计数法的问题)

一、解决将Long型转化为科学计数法的问题 1.1 场景 将一个对象转为Map类型时&#xff0c;调用Gson.fromJson发现&#xff0c;原来对象中的long类型的personId字段&#xff0c;被解析成了科学计数法&#xff0c;导致请求接口失败&#xff0c;报参数错误。 解决结果图 1.2、Exa…...

【Win开发环境搭建】Redis与可视化工具详细安装与配置过程

&#x1f3af;导读&#xff1a;本文档提供了Redis的简介、安装指南、配置教程及常见操作方法。包括了安装包的选择与配置环境变量的过程&#xff0c;详细说明了如何通过修改配置文件来设置密码和端口等内容。同时&#xff0c;文档还介绍了如何使用命令行工具连接Redis&#xff…...

Compose知识分享

前言 “Jetpack Compose 是一个适用于 Android 的新式声明性界面工具包。Compose 提供声明性 API&#xff0c;让您可在不以命令方式改变前端视图的情况下呈现应用界面&#xff0c;从而使编写和维护应用界面变得更加容易。” 以上是Compose官网中对于Compose这套全新的Androi…...

python-study-day5

urllib中handler的使用 import urllib.request url "http://www.baidu.com" headers {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 Edg/122.0.0.0 } # 请求地址的定制 reques…...

Telegram mini app 本地开发配置

前言&#xff1a; 为了能在telegram里本地调试mini app&#xff0c;参考了网上很多方案&#xff0c;踩了不少坑。最后整了一个适合自己的方案&#xff0c;记录一下。 这个方案一定不是最好的&#xff0c;不过是目前适合我上手开发的方案了。 本文章适合需要在 telegram 本地…...

python发票查验接口助您拒绝做糊涂账、发票ocr

发票识别发票查验接口让发票真假立现。仅需一键上传发票图片&#xff0c;即可实现发票真伪的秒速、批量验证&#xff0c;操作简单方便&#xff0c;避免因人工核验失误所导致“错账”现象的发生&#xff0c;减轻财务工作负担&#xff0c;提升企业工作效率&#xff0c;降低因假票…...

【Linux】线程控制|POSIX线程库|多线程创建|线程终止|等待|线程分离|线程空间布局

目录 ​编辑 POSIX线程库 多线程创建 独立栈结构 获取线程ID pthread_self 线程终止 return终止线程 pthread_exit pthread_cancel 线程等待 退出码问题 线程分离 测试 线程ID及地址空间布局 ​编辑 POSIX线程库 pthread线程库是 POSIX线程库的一部分&#xf…...

JimuReport 积木报表 v1.8.0 版本发布,开源可视化报表

项目介绍 一款免费的数据可视化报表工具&#xff0c;含报表和大屏设计&#xff0c;像搭建积木一样在线设计报表&#xff01;功能涵盖&#xff0c;数据报表、打印设计、图表报表、大屏设计等&#xff01; Web 版报表设计器&#xff0c;类似于excel操作风格&#xff0c;通过拖拽完…...

性能优化理论篇 | swap area是个什么东西

我们知道每台计算机的内存&#xff08;RAM&#xff09;都是有限的&#xff0c;而我们的应用程序需要加载到内存才能被运行&#xff0c;如果一台机器运行多个应用程序时&#xff0c;内存可能会耗尽。Linux 系统中的“交换空间&#xff08;也称为交换分区&#xff09;”可以帮助缓…...

Photoshop (PS)下载安装win/mac版

目录 一、概述 下载 二、安装步骤 三、使用教程 四、快捷键汇总 一、概述 Adobe Photoshop&#xff0c;简称“PS”&#xff0c;是由Adobe Systems开发和发行的图像处理软件。它主要处理以像素所构成的数字图像&#xff0c;涵盖了诸多领域&#xff0c;如图像编辑、图像合成…...

初识redis:Set类型

Set有很多种含义&#xff0c;比如集合&#xff0c;比如设置&#xff08;和get相对应&#xff09;。 在这里我们说的set是指的redis中的集合&#xff0c;并且这里的集合是无序的&#xff0c;和之前的list是对应的。 List &#xff1a; [1,2,3] 和 [2,1,3] 是两个不同的listSe…...

Qt 设置QTableView的某列或某行只读

我的做法是实现一个委托&#xff08;delegate&#xff09;&#xff0c;然后把它设给你要只读的列或行 class ReadOnlyDelegate: public QItemDelegate {public:ReadOnlyDelegate(QWidget *parent NULL):QItemDelegate(parent){}QWidget *createEditor(QWidget *parent, const…...

这么多焊工证,我该拥有那种焊工证呢?

焊接与切割作为特种作业工作&#xff0c;国家根据不同的环境和作业特点&#xff0c;从事焊接工作的焊工需要持证上岗工作&#xff0c;那么是不是焊接就只有一种工作证呢&#xff1f;如果不是&#xff0c;焊工所在的工作岗位需要什么样的焊工证&#xff0c;如何取得焊工证&#…...

HttpWebRequest访问https请求被中止: 未能创建 SSL/TLS 安全通道

编写代码&#xff0c;使用HttpWebRequest访问网页&#xff0c;错误提示&#xff1a; 未能创建 SSL/TLS 安全通道 页面本来是Http网址&#xff0c;突然转换为https网址&#xff0c;所以遇到这个问题也算正常。将解决方法记录下来给需要的人。 //只需要在 HttpWebRequest 发送…...

响应式Web设计:纯HTML和CSS的实现技巧

文章目录 响应式Web设计&#xff1a;纯HTML和CSS的实现技巧一、响应式Web设计概述二、实现响应式设计的技巧1. 使用媒体查询&#xff08;Media Queries&#xff09;2. 使用弹性布局&#xff08;Flexbox&#xff09;3. 使用网格布局&#xff08;CSS Grid&#xff09;4. 使用相对…...

linux centos 防火墙常用命令

1、开放端口 firewall-cmd --zonepublic --add-port80/tcp --permanent 1 2、查看某端口是否开放 firewall-cmd --query-port80/tcp 1 3、查看端口开启列表 firewall-cmd --list-port 1 4、重启防火墙 firewall-cmd --reload 1 5、关闭防火墙 systemctl stop firewalld.se…...

iOS18 Beta7 最终测试版推送:苹果的又一次技术飞跃

苹果公司以其一贯的创新精神和对完美的追求&#xff0c;再次引领了科技界的新潮流。今天&#xff0c;我们聚焦于苹果最新推送的iOS18 Beta7最终测试版&#xff0c;这一版本不仅是苹果软件更新的里程碑&#xff0c;更是用户体验的一次重大升级。 最终测试版的亮相 在众多果粉的…...

超详细!2024叉车证办理及考试流程详解!速看!

根据《特种设备安全监察条例》规定&#xff1a;叉车操作员必须经专业培训和考核&#xff0c;取得地、市级以上质量技术监督行政部门颁发的作业人员资格证书&#xff0c;方可从事该项工作。叉车驾驶证是属于特种车辆驾驶证&#xff0c;要到全国市级质量监督局指定叉车训练基地报…...

浅谈监听器插件之SSHMon Samples Collector

浅谈监听器插件之SSHMon Samples Collector SSHMon Samples Collector 是 JMeter 的一个强大插件&#xff0c;它允许用户通过 SSH 协议远程监控目标服务器的资源利用率&#xff0c;为性能测试提供实时的系统性能数据。这对于评估应用在高负载条件下的表现以及定位性能瓶颈至关…...

DoubletFinder实战指南:精准识别单细胞测序中的双细胞干扰

1. 双细胞干扰&#xff1a;单细胞测序中的"隐形杀手" 做单细胞测序分析的朋友们应该都遇到过这种情况&#xff1a;明明细胞分群很清晰&#xff0c;但总有几个"奇怪"的cluster既表达A细胞标志物又表达B细胞特征。这种情况很可能就是遇到了双细胞干扰——两个…...

granite-4.0-h-350m效果展示:Ollama运行下德语工业标准文档理解案例

granite-4.0-h-350m效果展示&#xff1a;Ollama运行下德语工业标准文档理解案例 1. 模型核心能力概览 Granite-4.0-H-350M是一个轻量级但功能强大的指令模型&#xff0c;专门针对设备部署和研究场景优化。这个350M参数的模型虽然体积小巧&#xff0c;但在多语言理解和指令跟随…...

Cadence启动文件背后的设计哲学:为什么.cdsinit总覆盖不了.cdsenv的设置?

Cadence启动文件背后的设计哲学&#xff1a;为什么.cdsinit总覆盖不了.cdsenv的设置&#xff1f; 当你在Cadence Virtuoso中反复调整波形显示参数&#xff0c;却发现每次重启后设置都被重置时&#xff0c;背后隐藏的是一套精妙的EDA工具配置体系。这个看似简单的"设置失效…...

机械设计制造及自动化—万门大学月特训班 (清华老师讲授) 1、机械制图 2、机械制造 3、机械原理 4、机械设计

机械设计制造及自动化—万门大学月特训班 &#xff08;清华老师讲授&#xff09; 1、机械制图 2、机械制造 3、机械原理 4、机械设计 全580集&#xff0c;直接从零基础到机械设计与自动化行业大佬 在这里插入图片描述...

AI辅助学术写作:Qwen3-0.6B-FP8搭配LaTeX生成论文章节与参考文献

AI辅助学术写作&#xff1a;Qwen3-0.6B-FP8搭配LaTeX生成论文章节与参考文献 写论文&#xff0c;尤其是写引言和参考文献&#xff0c;是不是让你特别头疼&#xff1f;对着空白的文档发呆&#xff0c;不知道从何下笔&#xff1b;或者为了找一篇关键的参考文献&#xff0c;在数据…...

[段错误修复]:Emacs代码补全崩溃的系统排查与版本管理策略

[段错误修复]&#xff1a;Emacs代码补全崩溃的系统排查与版本管理策略 【免费下载链接】doomemacs An Emacs framework for the stubborn martian hacker 项目地址: https://gitcode.com/gh_mirrors/do/doomemacs 副标题&#xff1a;如何诊断LSP服务异常导致的Emacs崩溃…...

应对维普AIGC史诗级升级:2026降重急救包!5款工具基准测试 x 4大手改重构技巧

论文初稿快要交了&#xff0c;维普却突然搞了个大动作&#xff0c;把系统给升级了。说实话&#xff0c;这事真挺让人头疼的&#xff0c;有人前两天查还是绿的&#xff0c;以为稳了&#xff0c;结果升级完再一测&#xff0c;AI率直接飙红。 但别慌&#xff0c;也别怀疑自己是不…...

Python与Matlab双剑合璧:高效解析XJTU-SY轴承数据集实战指南

1. 为什么选择Python和Matlab处理XJTU-SY轴承数据 轴承故障诊断是工业设备健康管理的重要环节&#xff0c;而XJTU-SY轴承数据集作为国内知名的公开数据集&#xff0c;包含了多种工况下的全寿命周期振动数据。面对这样的工程数据集&#xff0c;Python和Matlab各有优势。我在实际…...

基于hadoop+spark+hive 机器学习物流管理系统 货运路线规划系统 智慧交通 计算机毕业设计 Echarts可视化

1、项目介绍 技术栈&#xff1a; Python语言、Django框架、Echarts可视化、MySQL数据库、HTML、报表、物流信息、多角色登录、物流管理该系统采用python和django两种常见的框架&#xff0c;通过MVT来实现对数据集 成和分析&#xff0c;从而更好地满足各种需求。此外&#xff0c…...

告别pip安装失败:在Jetson Nano(ARM64)上手动编译PyQt5 5.15.2的完整记录

在Jetson Nano&#xff08;ARM64&#xff09;上手动编译PyQt5 5.15.2的完整指南 当你在Jetson Nano这样的ARM64架构设备上尝试用pip安装PyQt5时&#xff0c;很可能会遇到各种兼容性问题。作为一款强大的Python GUI库&#xff0c;PyQt5在嵌入式开发中有着广泛的应用场景&#x…...