标题导航点击导航滑动到指定位置滑动到指定位置选中对应导航vue3

菜单导航栏点击导航滑动到指定位置&滑动到指定位置选中对应导航

效果

在这里插入图片描述

实现

话不多说直接上代码,有用素质三连(点赞、评论、加关注)

import { defineComponent, onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { map } from "lodash";
import { css } from "@emotion/css";
export default defineComponent({setup: () => {const scrollRef = ref();const state = reactive({current: 1,list: [{ num: 1, title: "将军令" },{ num: 2, title: "将军令" },{ num: 3, title: "将军令" },{ num: 4, title: "将军令" },{ num: 5, title: "将军令" },],});const handleScroll = (e) => {state.list.forEach((item) => {let scrollTopNum = document.getElementById(`anchor_${item.num}`).offsetTop - 200;if (e.target.scrollTop >= scrollTopNum) {state.current = item.num;}});};const toAnchor = (item) => {let scrollTopNum = document.getElementById(`anchor_${item.num}`).offsetTop - 200;scrollRef.value.scrollTop = scrollTopNum;state.current = item.num;};onMounted(() => {state.current = 1;scrollRef.value.addEventListener("scroll", handleScroll, true);});onBeforeUnmount(() => {scrollRef.value && scrollRef.value.removeEventListener && scrollRef.value?.removeEventListener("scroll");});return () => {return (<divclass={css({display: "flex",alignItems: "center",p: {color: "#666",},".content": {width: 500,height: 300,overflowY: "scroll",marginLeft: 300,marginRight: 20,},})}><div className="content" ref={scrollRef}>{map(state.list, (item) => {return (<div id={`anchor_${item.num}`}><div className="title">{item.title + item.num}</div><div><p>歌曲名 将军令 歌手名 吴克群</p><p>作词:吴克群</p><p>作曲:吴克群</p><p>我知道对有什么不对</p><p>我知道将军说的话不一定对</p><p>我知道对或错我自己能分辨</p><p>请你安静点请你安静点</p><p>Yeah</p><p>我知道对有什么不对</p><p>我知道外国的月亮没比较圆</p><p>我知道yo yo yo</p><p>不是我的语言</p><p>请你安静点请你安静点</p><p>Yeah</p><p>我是个小兵我绷紧了神经</p><p>在战场上</p><p>拼命听谁在发号施令</p><p>将军在微醺他方向分不清</p><p>西方人念经他全都听</p><p>不同的肤色说不同的话语</p><p>相同的节奏有不同的旋律</p><p>自己的文化要自己来说明</p><p>自己的舞台有我们自己顶</p><p>我知道对有什么不对</p><p>我知道将军说的话不一定对</p><p>我知道对或错我自己能分辨</p><p>请你安静点请你安静点</p></div></div>);})}</div><el-steps direction="vertical" class={css({ height: "500px !important" })}>{map(state.list, (item) => {return (<el-stepstatus={state.current == item.num ? "finish" : ""}onClick={() => toAnchor(item)}class={css({cursor: "pointer",})}/>);})}</el-steps></div>);};},
});

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

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

相关文章

Typora .MD笔记中本地图片批量上传到csdn (.PNG格式)(无需其他任何图床软件)

Typora .MD笔记中本地图片批量上传到csdn &#xff08;.PNG格式&#xff09;(无需其他任何图床软件) 截图软件推荐 qq 截图 快捷键 ctrlshiftA. 步骤一 设置Typora 的图片 点击文件. 点击偏好设置 ->图像 我们可以选择将图片复制到我们的文件夹中。 建议刚写好文件标题就…

推荐6款本周 yyds 的开源项目

&#x1f525;&#x1f525;&#x1f525;本周GitHub项目圈选: 主要包含 链接管理、视频总结、有道音色情感合成、中文文本格式校正、GPT爬虫、深度学习推理 等热点项目。 1、Dub 一个开源的链接管理工具&#xff0c;可自定义域名将繁杂的长链接生成短链接&#xff0c;便于保…

抖音直播招聘报白如何提高求职者体验?

为了提升抖音直播招聘报白中求职者的体验&#xff0c;以下是一些建议&#xff1a; 提供清晰的招聘流程和信息。在直播招聘开始之前&#xff0c;企业或人力资源公司应提供清晰的流程和信息&#xff0c;包括直播时间和直播平台&#xff0c; 职位信息&#xff0c;招聘要求等&…

Go语言多线程爬虫万能模板它来了!

对于长期从事爬虫行业的技术员来说&#xff0c;通过技术手段实现抓取海量数据并且做到可视化处理&#xff0c;我在想如果能写一个万能的爬虫模板&#xff0c;后期遇到类似的工作只要套用模板就能解决大部分的问题&#xff0c;如此提高工作效率何乐而不为&#xff1f; 以下是一个…

pinia从入门到使用

pinia: 比vuex更适合vue3的状态管理工具&#xff0c;只保留了vuex 原有的 state, getters&#xff0c;actions 作用等同于 data computed methods&#xff0c;可以有多个 state 1.安装创建导入 安装&#xff1a;npm install pinia 或 yarn add pinia 创建stores/index.js inde…

python+pytest接口自动化(4)-requests发送get请求

python中用于请求http接口的有自带的urllib和第三方库requests&#xff0c;但 urllib 写法稍微有点繁琐&#xff0c;所以在进行接口自动化测试过程中&#xff0c;一般使用更为简洁且功能强大的 requests 库。下面我们使用 requests 库发送get请求。 requests库 简介 request…

网络和Linux网络_7(传输层)UDP和TCP协议(端口号+确认应答+超时重传+三次握手四次挥手)

目录 1. 重看端口号 1.1 端口号的概念 1.2 端口号的划分 2. 重看UDP协议 2.1 UDP协议格式 2.2 UDP的特点 3. 重看TCP协议 3.1 TCP协议格式 3.2 TCP的解包分用 3.3 TCP的可靠性及机制 3.3.1 确认应答ACK机制 3.3.2 超时重传机制 3.3.3 连接管理机制&#xff08;三次…

手写工作流设计模式,针对常见的工作流步骤流转,减少过多的if/else,提升编程思维

需求 这一年下来&#xff0c;写两次工作流流转&#xff0c;总结下经验。 第一次写的时候&#xff0c;只找到用模版设计模式包裹一下&#xff0c;每个方法都做隔离&#xff0c;但是在具体分支实现的时候&#xff0c;if/else 满屏分&#xff0c;而且因为要针对不同情况&#xff…

Linux系统centos7防火墙firewall开放IP及端口命令

CentOS7使用的是firewall防火墙&#xff0c;不再是原来的iptables 防火墙基础命令 1&#xff1a;查看firewall防火墙状态 firewall-cmd --state //或 systemctl status firewalld2&#xff1a;打开防火墙 systemctl start firewalld3&#xff1a;关闭防火墙 systemctl sto…

什么牌子的led台灯质量好?考研必备五款护眼台灯推荐

眼睛更是心灵的窗户&#xff0c;我们通过这扇窗来欣赏这个美好的世界。而如今&#xff0c;近视在儿童中已司空见惯&#xff0c;近视率逐年提高&#xff0c;并且低龄化的现状更加突出。据世界卫生组织的最新研究报告&#xff0c;目前中国近视患者人数多达6亿&#xff0c;其中我国…

20. Matplotlib 数据可视化

目录 1. 简介2. Matplotlib 开发环境2.1 画图2.2 画图接口2.4 线形图2.5 散点图2.6 等高线图2.7 直方图 1. 简介 Matplotlib网址&#xff1a;https://matplotlib.org/ 数据可视化是数据分析中最重要的工作之一。Matploblib是建立在Numpy数组基础上的多平台数据可视化程序库&a…

WPF前端实现人脸扫描动画效果

前言 本章实现的效果主要通过OpacityMask与LinearGradientBrush(径向渐变) 的组合应用来实现。最终实现效果如下: LinearGradientBrush线性渐变画刷 LinearGradientBrush其实很简单,我们只需要关注5个属性,使用这5个属性你就可以完成这个画刷几乎所有的变化。 属性介…

样品实验Placcel230N聚己内酯二元醇PCL说明书

样品实验Placcel230N聚己内酯二元醇PCL说明书 1KG/罐

财报解读:三季度的美国零售,“沃尔玛效应”仍在持续

经济学中常用“沃尔玛效应”来指代“消费者减少消费时&#xff0c;会选择每种类别中价格最低的商品”这一现象。作为全球最大的零售商&#xff0c;沃尔玛一定程度上成为了消费市场的风向标。 近日&#xff0c;沃尔玛发布的2024财年第三季度财报显示&#xff0c;其相较去年同期…

Linux:Ubuntu系统安装软件

本次以安装vim为例 sudo apt-get remove vim //卸载vim sudo apt-get install vim //安装vim sudo apt-cache show vim //获取vim软件信息安装时间较长。 安装完成后&#xff0c;执行下第三条指令&#xff0c;测试下是否安装成功即可。

c#把bitmap格式转换为其他格式图片

增加引用命名空间 using System.Drawing.Imaging; 打开对话框的方式读入bmp格式图片&#xff0c;转换为其他格式。 也可以直接传入图片名称。 OpenFileDialog ofd new OpenFileDialog();ofd.Title "打开对话框";ofd.InitialDirectory "D:/";ofd.Filt…

ASM字节码操作类库(打开java语言世界通往字节码世界的大门) | 京东云技术团队

前言&#xff1a;授人以鱼不如授人以渔&#xff0c;应用asm的文章有很多&#xff0c;简单demo的也很多&#xff0c;那么ASM都具备哪些能力呢&#xff1f;如何去学习编写ASM代码呢&#xff1f;什么样的情景需要用到ASM呢&#xff1f;让我们带着这些问题阅读这篇文章吧。 这里由…

linux服务器安装gitlab

一、安装gitlab sudo yum install curl policycoreutils-python openssh-server openssh-clients sudo systemctl enable sshd sudo systemctl start sshd sudo firewall-cmd --permanent --add-servicehttp curl https://packages.gitlab.com/install/repositories/gitla…

Golang并发模型:Goroutine 与 Channel 初探

文章目录 goroutinegoexit() channel缓冲closerangeselect goroutine goroutine 是 Go 语言中的一种轻量级线程&#xff08;lightweight thread&#xff09;&#xff0c;由 Go 运行时环境管理。与传统的线程相比&#xff0c;goroutine 的创建和销毁的开销很小&#xff0c;可以…

sap系统连接其它系统

本文来自博客园&#xff0c;作者&#xff1a;Lovemywx2&#xff0c;转载请注明原文链接&#xff1a;https://www.cnblogs.com/1187163927ch/p/8669859.html JAVA连接ORACLE数据库 1&#xff0c;首先需要在Oracle安装完成之后新建一个用户 --新建用户 create user chenh iden…