当前位置: 首页 > 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;为性能测试提供实时的系统性能数据。这对于评估应用在高负载条件下的表现以及定位性能瓶颈至关…...

别再只用DataParallel了!PyTorch单机多卡训练保姆级教程(从DP到DDP实战避坑)

从DataParallel到DDP&#xff1a;PyTorch单机多卡训练深度优化指南 当你的模型参数突破1亿大关&#xff0c;单卡训练时间从几小时延长到几天时&#xff0c;多GPU并行训练就从一个可选项变成了必选项。但面对PyTorch提供的DataParallel(DP)和DistributedDataParallel(DDP)两种方…...

LoRA训练助手效果展示:动漫风格迁移作品集

LoRA训练助手效果展示&#xff1a;动漫风格迁移作品集 1. 引言 你是否曾经想过&#xff0c;把自己拍摄的普通照片转换成新海诚风格的唯美画面&#xff0c;或者让日常场景拥有吉卜力工作室的梦幻质感&#xff1f;现在&#xff0c;这一切都不再是梦想。通过LoRA训练助手&#x…...

Qwen3-ASR-0.6B在新闻行业的应用:采访录音快速转写

Qwen3-ASR-0.6B在新闻行业的应用&#xff1a;采访录音快速转写 1. 引言 新闻记者每天都要面对大量的采访录音&#xff0c;传统的手工转写方式耗时耗力。一段30分钟的采访录音&#xff0c;熟练的转录员可能需要2-3小时才能完成转写&#xff0c;而且还要面对口音、专业术语、背…...

基于深度学习的CT肺部分割技术:在医学影像分析中实现95% Dice系数的精准自动化方案

基于深度学习的CT肺部分割技术&#xff1a;在医学影像分析中实现95% Dice系数的精准自动化方案 【免费下载链接】lungmask Automated lung segmentation in CT 项目地址: https://gitcode.com/gh_mirrors/lu/lungmask 在医学影像分析领域&#xff0c;CT肺部分割一直是临…...

MusePublic Art Studio参数详解:随机种子锁定与艺术风格复现方法

MusePublic Art Studio参数详解&#xff1a;随机种子锁定与艺术风格复现方法 1. 理解随机种子&#xff1a;艺术创作的"基因密码" 在AI图像生成领域&#xff0c;随机种子就像是每幅作品的DNA序列。它决定了生成过程中的随机性因素&#xff0c;是控制输出结果一致性的…...

3分钟打造个性化英雄联盟体验:LeaguePrank工具让段位展示彻底自定义

3分钟打造个性化英雄联盟体验&#xff1a;LeaguePrank工具让段位展示彻底自定义 【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank 你是否曾想在好友面前展示独特的游戏段位&#xff1f;是否希望自己的游戏生涯页面与众不同&…...

Python自动化运维实战:用Paramiko库5分钟搞定SSH批量管理(附完整代码)

Python自动化运维实战&#xff1a;用Paramiko库5分钟搞定SSH批量管理&#xff08;附完整代码&#xff09; 运维工程师的日常工作中&#xff0c;服务器管理往往占据大量时间。想象一下&#xff0c;当你需要同时更新50台服务器的安全补丁&#xff0c;或者批量收集100台设备的日志…...

保姆级教程:手把手配置Postern 3.1.2与Charles v4.6.4联动,实现安卓APP全局流量抓取

安卓移动端流量抓取实战&#xff1a;Postern与Charles深度配置指南 移动应用开发与安全测试中&#xff0c;流量抓取是分析网络行为、调试接口问题的核心技术。不同于简单的代理设置&#xff0c;当应用采用非标准通信协议或主动规避代理时&#xff0c;传统抓包方案往往失效。本文…...

为什么SwinIR在图像修复中吊打CNN?深入解析Swin-Transformer的三大优势

SwinIR如何重新定义图像修复&#xff1f;Transformer架构的三大技术革命 当你在手机相册里翻出一张十年前的老照片&#xff0c;却发现它模糊得连人脸都难以辨认时&#xff0c;传统CNN模型或许能帮你恢复部分细节&#xff0c;但边缘依然会显得生硬失真。这正是SwinIR要解决的核心…...

NEURAL MASK 模型调试技巧:使用IDE进行Python代码跟踪与问题定位

NEURAL MASK 模型调试技巧&#xff1a;使用IDE进行Python代码跟踪与问题定位 调试代码&#xff0c;尤其是涉及复杂模型加载和推理的代码&#xff0c;有时候就像在黑暗的房间里找一颗掉落的螺丝钉。你大概知道它就在那儿&#xff0c;但就是看不见摸不着。对于NEURAL MASK这类模…...