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

实现侧边栏点击标题列表，和中间列表区域联动效果

news 来源：原创 2025/7/24 12:50:37

左侧边栏标题列表实现：

-------------------html-----------------------<divclass="uav":class="{ hidden: !isVisible, visible: isVisible }"><ul id="toc"><liv-for="(item, index) in HotList":key="index":class="{ active: activeSectionId == item.id }"class="point tocbox"><a @click.prevent="scrollToSection(item.id)"> {{ item.name }}</a></li></ul></div>
--------------------js(v3)--------------------//标题列表数据获取
const HotList = ref([]);
const ObtainHotBox = () => {GetHotBox().then((res) => {if (res.data && res.data.data) {// 过滤出 box 不为空的数据const filteredData = res.data.data.filter(item => item.box && item.box.length > 0);HotList.value = filteredData;}});
};//实现点击左侧标题  中间内容区域滚动到对应标题位置
const isManualScrolling = ref(false)
const scrollToSection = (sectionId) => {// 启用手动滚动标记isManualScrolling.value = trueconst element = document.getElementById(sectionId);if (!element) return;console.log(`滚动到 id 为 ${sectionId} 的元素`, element);if (element) {const elementTop = element.getBoundingClientRect().top + window.scrollY;window.scrollTo({top: elementTop - 89,   //减去固定头部高度behavior: "smooth",});} else {console.log(`未找到 id 为 ${sectionId} 的元素`);}// 更新选中的区块IDactiveSectionId.value = sectionId;// 500ms后释放锁定（超过滚动动画时间）setTimeout(() => {isManualScrolling.value = false}, 800)
};//检测中间区域内容
const isVisible = ref(false);
const targetPosition = ref(400);
const activeSectionId = ref(null);
const updateActiveSection = () => {// 如果是手动触发的滚动，跳过自动检测if (isManualScrolling.value) return// 监听滚动事件// 使用 window.scrollY 替代已弃用的 window.pageYOffsetif (window.scrollY > targetPosition.value) {isVisible.value = true;} else {isVisible.value = false;}const sections = document.querySelectorAll(".Title");let closest = null;  // 初始值设为上一次的值let minDistance = Infinity;console.log('sections')sections.forEach((section) => {const rect = section.getBoundingClientRect();// 检查区块是否在视窗内或上方（但不超过视窗高度）if (rect.top >= 0 && rect.top < window.innerHeight) {// 选择最接近视窗顶部的区块if (rect.top <= minDistance) {minDistance = rect.top;closest = section.id;}}});activeSectionId.value = closest;
//   console.log('当前激活的区块 ID:', activeSectionId.value,closest);
};onMounted(async () => {window.addEventListener("scroll", updateActiveSection);
});
onUnmounted(() => {window.removeEventListener("scroll", updateActiveSection);
});--------------------css------------------
.uav {position: fixed;left: 0.4rem;top: 30%;z-index: 99;#toc {width: 1.82rem;font-weight: 400;text-align: center;font-size: 0.12rem;color: #9373c3;background: url("../../common/assets/images/maodianbg.png") no-repeat;background-size: 100% 100%;padding: 0.2rem 0;.tocbox {width: 1.36rem;text-align: center;margin: 0.22rem auto;}.active {/* 选中状态的样式 */color: #c7c7ff;background: url("../../common/assets/images/acmaodian.png") no-repeat;background-size: 100% 100%;transition: all 0.3s ease-out;will-change: transform, opacity;}/* 隐藏默认滚动条减少视觉干扰 */html {scrollbar-width: none; /* Firefox */-ms-overflow-style: none; /* IE */}::-webkit-scrollbar {display: none; /* Chrome/Safari */}}
}

中间区域内容联动：给列表项添加Title类名，以及绑定动态:id="item.id"

<div class="mb-[1.6rem]"><divv-show="item.box.length"v-for="(item, index) in homeBoxList":key="item.id"><divv-if="item.src"class="flex-c mb-[0.1rem]  Title":id="item.id"><div  class="w-[5.5rem] h-[0.69rem] flex-c"><img class="h-full" :src="item.src" alt="" srcset="" /></div></div>
...

实现侧边栏点击标题列表，和中间列表区域联动效果

左侧边栏标题列表实现： -------------------html-----------------------<divclass"uav":class"{ hidden: !isVisible, visible: isVisible }"><ul id"toc"><liv-for"(item, index) in HotList":key"…...

编程日记 2025/7/24 12:50:37

基于MuJoCo物理引擎的机器人学习仿真框架robosuite

Robosuite 基于 MuJoCo 物理引擎，能支持多种机器人模型，提供丰富多样的任务场景，像基础的抓取、推物，精细的开门、拧瓶盖等操作。它可灵活配置多种传感器，提供本体、视觉、力 / 触觉等感知数据。因其对强化学习友好&am…...

编程日记 2025/7/23 15:54:12

kafka监控kafka manager（CMAK）部署配置

一、准备工作 1.1、服务器信息梳理角色IP操作系统安装服务监控机10.45.19.20Linux CentOS 7.9CMAK3.0.0.5、ZooKeeper3.9.0、JDK11、JDK1.8被监控机 Kafka broker.id 050.50.50.101Linux CentOS 7.9Kafka、ZooKeeper（任意版本）被监控机 Kafka broker.…...

编程日记 2025/7/24 12:42:29

线程池的介绍

目录一、什么是线程池二、线程池的详细内容三、线程池的简化一、什么是线程池提到线程池，我们可能想到常量池，可以先来说说常量池： 像是字符串常量，在Java程序最初构建的时候，就已经准备好了，等程…...

编程日记 2025/7/24 12:38:10

day33和day34图像处理OpenCV

文章目录一、图像预处理12 图像梯度处理12.3 Sobel算子12.4 Laplacian算子1.原理：2.语法： 13 图像边缘检测思路13.1 高斯滤波去噪点13.2 计算图像的梯度与方向13.3 非极大值抑制13.4 双阈值筛选13.5 Canny方法和使用 14 绘制图像轮廓14.1 什么是轮廓14.…...

编程日记 2025/7/24 12:36:59

电脑硬盘常见的几种接口类型

一、传统接口（机械硬盘为主） 1. SATA 接口（Serial ATA） 特点： 最主流的机械硬盘（HDD）接口，广泛用于台式机和笔记本电脑。传输速度较慢，理论最大带宽为 6 Gbps&#xff…...

编程日记 2025/7/24 12:46:47

Windows网络及服务：制作系统盘

今天我要介绍的是一个比较有意思且好玩的一个小玩意儿：关于系统盘的制作； 注明：对于系统盘的制作，以及接下来的课程，基本是作为动手课业来进行的，这也是作为程序员的必要进行的一项活动。对于系统盘&…...

编程日记 2025/7/24 12:41:20

Docker Compose 使用实例

文章目录一、Docker Compose 简介二、安装 Docker Compose三、基础配置文件示例（docker-compose.yml）四、关键配置解析五、常用命令六、完整项目示例（Node.js MySQL Nginx）七、高级功能八、最佳实践九、调试技巧一、Docker Co…...

编程日记 2025/7/24 12:48:02

系统架构师2025年论文《论基于UML的需求分析》

论基于 UML 的需求分析摘要： 2018 年 3 月 1 日至 12 月 20 日，我参加了 “某市医院预约挂号系统” 项目的开发，担任系统架构师的工作。该项目是某市医院信息化建设的重要组成部分，目标是：优化医院挂号流程，提高患者就医体验，规范医院号源管理，实现患者预约挂号、医…...

编程日记 2025/7/23 22:24:37

Uniapp 自定义TabBar + 动态菜单实现教程（Vuex状态管理详解）

大家好，我是一诺。今天跟大家分享一下uniapp 封装自定义底部导航栏（TabBar） 过程中的思考和实践。通过本文，你将学会如何打造一个功能完善、可自由定制的TabBar组件！ 先看效果： 支持自定义图标和样式动态…...

编程日记 2025/7/23 15:49:20

4月21日日记

新的一周开始了，好消息是未来这两周都每周只用上3天课，因为这周四五是运动会，下周四五是五一！ 非常好的周一！收到了wxx和san还有小林的礼物！！ wxx的是一个定制的有小排球的蓝牙影响&#xff0…...

编程日记 2025/7/20 6:35:10

2025高频面试算法总结篇【其他】

文章目录直接刷题链接直达LRU Cache买卖股票的最佳时机系列实现一个HashMap环形链表寻找重复数缺失的第一个正数螺旋矩阵字符串相乘分发糖果直接刷题链接直达 LRU Cache 头尾两个伪节点（避免判断） 双向链表146. LRU 缓存买卖股票的最佳时机系列 121…...

编程日记 2025/7/18 12:20:17

参考先知demons 这位大佬的这篇文章：https://blog.csdn.net/wzy_PROTEIN/article/details/136305034?utm_mediumdistribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0-136305034-blog-136032209.235v43pc_blog_bottom_relevance_ba…...

编程日记 2025/7/19 5:45:27

文档处理控件Aspose.Words 教程：在 Word 中删除空白页完整指南

Word 文档中的空白页总是令人烦恼。如果您想从 Word 文档中删除空白页，以获得更清晰的演示文稿或整理文件，那么您来对地方了。本指南涵盖了使用 Aspose.Words编码解决方案和在 Microsoft Word 中手动删除方案，让您可以灵活地选择最适合自己的…...

编程日记 2025/7/23 5:28:49

自动驾驶最新算法进展

自动驾驶技术的算法进展迅速，涵盖感知、预测、规划、端到端学习等多个领域。以下是2023年至2024年的关键进展及实例： 1. ‌感知与融合‌ ‌BEVTransformer的进化‌：特斯拉的Occupancy Networks升级至支持动态场景建模，结合NeRF技术…...

编程日记 2025/7/24 12:24:24

OpenCV训练题

一、创建一个 PyQt 应用程序，该应用程序能够： 使用 OpenCV 加载一张图像。在 PyQt 的窗口中显示这张图像。提供四个按钮（QPushButton）： 一个用于将图像转换为灰度图一个用于将图像恢复为原始彩色图一个用于将图像进行…...

编程日记 2025/7/22 11:11:16

34、Spark实现读取XLS文件

需求背景： 有一些xls大文件数据。使用spark-excel（spark-excel）来读取时，文件太大会oom；工具提供的流式读取参数：maxRowsInMemory 也只支持xlsx类型文件。搜索了poi流式读取xls的方案，HSSFEvent…...

编程日记 2025/7/19 13:58:39

为什么RPN生成的候选框，要使用rcnn来进行分类和回归操作?

一句大白话总结：RPN是广撒网捕鱼，RCNN是细化鱼的分类和具体尺寸在目标检测任务中，RPN（区域提议网络） 生成的候选框需要经过 RCNN（如 Fast R-CNN、Faster R-CNN） 进行分类和回归，这…...

编程日记 2025/7/14 20:47:58

固定总价合同工程范围变更，如果规避风险

一、合同签订阶段工程范围的锁定清单式列举兜底条款：在合同附件中以 “正负零以上主体结构”“XX 型号设备采够” 等具体描述界定承包范围，同时约定 “超出本附件描述的工程内容视为变更”111。设计深度要求：对于 EPC 项目，需…...

编程日记 2025/7/19 22:27:53

windows传文件给mac, linux或者其他windows

如果你想把你本地windows的文件传递给mac, linux或者其他windows电脑, 你会使用什么方法呢? 方法一经常写python的朋友, 肯定会说, 我会用 SimpleHTTPServer python -m SimpleHTTPServer 8000生成一个超链接, 然后在其他机器上直接下载这个链接. 方法二 scp命令 Use SC…...

编程日记 2025/7/23 19:51:53

AI音乐解决方案：1分钟可切换suno、udio、luno、kuka等多种模型，suno风控秒切换 | AI Music API

你有没有觉得，suno风控来了，就要停服了？ 你有没有觉得，对接多种音乐模型，让你很疲乏？ 你有没有觉得，音乐模型，中文咬字不清楚，让你很苦恼？ 别怕&#xff0…...

编程日记 2025/7/17 19:22:59

LeetCode 热题100题解（Java版本）

一、哈希 1、两数之和 https://leetcode.cn/problems/two-sum/?envType=study-plan-v2&envId=top-100-liked使用HashMap，遍历数组，判断当前元素的“补数”是否存在，如果存在直接返回结果，否则在Map中记录当前元素及其下标。时间复杂度 O(n) 空间复杂度 O(n) class …...

编程日记 2025/7/23 23:13:40

突破传统！SEARCH-R1如何让LLM与搜索引擎协同推理？

大语言模型（LLMs）虽强大，但在复杂推理和获取最新信息方面存在局限。本文介绍的SEARCH-R1框架，通过强化学习让LLMs能自主与搜索引擎交互，在多个问答数据集上性能大幅提升。想知道它是如何做到的吗？快来一探究…...

编程日记 2025/7/19 8:59:46

C语言复习笔记--字符函数和字符串函数(下)

在上篇我们了解了部分字符函数及字符串函数,下面我们来看剩下的字符串函数. strstr 的使用和模拟实现老规矩,我们先了解一下strstr这个函数,下面看下这个函数的函数原型. char * strstr ( const char * str1, const char * str2); 如果没找到就返回NULL指针. 下面我们看下它的…...

编程日记 2025/7/24 4:56:59

Git SSH 密钥多个 Git 来源

1. 生成 SSH 密钥 ssh-keygen -t rsa -b 4096 -C "997959066qq.com" 2. 输入指定路径 3. 增加 config文件在.ssh文件下 # GitHub 主账户 Host github.dis.comHostName github.disney.comUser gitIdentityFile ~/.ssh/id_rsa# 其他 Git 服务器 Host github.comHost…...

编程日记 2025/7/22 13:09:14

华为盒式交换机堆叠配置

1. 堆叠线缆连线图（如下图） 2. 配置Swtich1： [HUAWEI] sysname Switch1 [Switch1] interface stack-port 0/1 [Switch1-stack-port0/1] port interface xgigabitethernet 0/0/3 xgigabitethernet 0/0/4 enable Warning: Enabling stack function may cause configuration l…...

编程日记 2025/7/23 15:37:56

map和set的使用

序列式容器和关联式容器 c标准库为我们提供了多种容器类型，可以大体分为两类：序列式容器和关联式容器。序列式容器按照线性顺序储存数据，元素的位置取决与插入的时间和地点。关联式容器基于键值对存储元素，提供高效的键查找能力…...

编程日记 2025/7/20 22:12:10

VMware制作Windows虚拟机模板注意点

1 、删除右下角的热删除这个是必须的！虚拟机的高级参照中添加devices.hotplug “FALSE”，关闭USB设备热插拔，防止用户把虚拟桌面的网卡删除掉。 2、移除CD/DVD驱动器这个建议！移除CD/DVD驱动器，此项操作…...

编程日记 2025/7/9 22:57:17

公有云攻防5（云函数）

Serverless概述无服务器（Serverless）不是表示没有服务器，而是表示当您在使用Serverless时，您无需关心底层的资源，也无需登录服务器和优化服务器，只需关注最核心的代码片段，即可跳过复杂的、繁琐的基本工作。 Serverless 拥有近乎无限的扩容能力，空闲时，不运行任何资…...

编程日记 2025/7/24 5:07:18

【计算机网络】第五章局域网技术

以太网技术以太网的诞生网络适配器和MAC地址单播MAC地址广播MAC地址 CSMA/CD协议 CSMA/CD协议的基本原理共享式以太网---广播特性 MA多址接入 CS载波监听---先听后说 CD碰撞检测---边听边说载波监听检测到总线空闲，但总线并不一定空闲。使用CSMA/CD协议的…...

编程日记 2025/7/18 23:05:37

傲来云分享，负载均衡：提升网站性能与稳定性

在网站或应用的流量不断增加时，单台服务器往往无法承载过多的并发请求，导致性能下降和响应延迟。负载均衡技术正是为了解决这个问题，它可以将流量分发到多台服务器，从而提高系统的可扩展性、处理能力和可靠性。今天，我…...

编程日记 2025/7/16 11:07:27

Python基础总结(九)之推导式

文章目录一、列表推导式1.1 列表推导式的格式1.2 列表推导式的注意事项1.3 列表推导式示例二、字典推导式2.1 字典推导式格式2.2 字典推导式注意事项2.3 字典推导式示例三、元组推导式3.1 元组推导式格式3.3 元组推导式示例 Python中的推导式有列表推导式，字典…...

编程日记 2025/7/16 5:02:46

程序员学商务英文之Terms of Payment Packing

Dia-3: Packing 1 包装-1 1. I’m here to improve my communication skill of English. 我来这里是为了提升我的英文沟通技能。 2. What a co-incidence! Fancy meeting you here. 这么巧！真没想到在这见到你。 3. Some birds aren’t meant to be caged…...

编程日记 2025/7/22 11:56:16

学生管理系统项目中的相关问题总结

目录 1. 项目中哪里体现出了封装性及其好处？ 2. 项目中的setter/getter模式与封装性什么是setter/getter？有什么用？怎么自动生成？ 3.项目中某些类的toString()方法 4. 项目中几个常用方法解析 5. 项目中的面向对象设计 1…...

编程日记 2025/7/20 16:08:12

AI驱动下的企业学习：人力资源视角下的范式重构与价值觉醒

一、传统企业学习体系的系统性失效当企业学习市场规模突破3600亿美元，人均年投入达1400美元的历史高位时，这场看似繁荣的图景背后却暗藏结构性危机。正如一份2024年研究报告所指出的，66%的企业仍倾向于通过外部招聘而非内部培养获取AI人才&…...

编程日记 2025/7/23 18:23:28

工厂模式：简单工厂模式

工厂模式简单工厂模式：子类对象较多，则引入工厂类来创建简单工厂模式流程： 实例： 某电视机厂为各个品牌代工生产电视机，可以使用简单工厂的模式来实现 #include <iostream> #include <vector> using…...

编程日记 2025/7/17 13:43:16

Java并发编程-线程池

Java并发编程-线程池线程池运行原理线程池生命周期线程池的核心参数线程池的阻塞队列线程池的拒绝策略线程池的种类newFixedThreadPoolnewSingleThreadExecutornewCachedThreadPoolnewScheduledThreadPool 创建线程池jdk的Executors(不建议，会导致OOM)jdk的ThreadP…...

编程日记 2025/7/19 11:11:26

ios17 音频加载失败问题

现象： 项目中有2个MP3 格式的音频，在iOS17 下一个可以播，一个不能播，但是在浏览器可正常播放原因： 不能播的mp3是因为其编码格式为mpeg-4 AAC 编码格式正常的mpeg audio 是可以播放的解决&am…...

编程日记 2025/7/20 9:27:40

HarmonyOS：Navigation实现导航之页面设置和路由操作

导读设置标题栏模式设置菜单栏设置工具栏路由操作页面跳转页面返回页面替换页面删除移动页面参数获取路由拦截子页面页面显示类型页面生命周期页面监听和查询页面转场关闭转场自定义转场共享元素转场跨包动态路由系统路由表自定义路由表示例代码 Navigation组件适用于模块…...

编程日记 2025/7/15 15:51:44

ADB -＞ pull指令拉取手机文件到电脑上

ADB Pull命令在Android开发中，ADB的pull命令可以帮助我们将文件从设备拷贝到电脑上。基本语法 adb pull <设备文件路径> [本地目标路径]<设备文件路径>：必需参数，指定要拉取的设备上的文件或文件夹[本地目标路径]&#xff1…...

编程日记 2025/7/21 1:25:51

Android Studio打开xml布局文件内存会快速增加如何设置

打开xml布局文件内存快速增加的原因是预览设置问题，直接在file-setting-editor-ui tools-editor view mode-resource: 选择code 就好了...

编程日记 2025/7/23 5:19:59

Spring Boot集成Keycloak

前言本文参考A Quick Guide to Using Keycloak with Spring Boot，整理实战中遇到的问题。 Docker 安装 Keycloak 下载镜像 quay下载镜像 docker pull quay.io/keycloak/keycloak 失败的话，可再次尝试。启动keycloak docker run -p 6060:8080 -…...

编程日记 2025/7/1 18:31:57

实验七 shell程序设计

实验七 shell程序设计一、实验目的理解shell的工作原理，学会编写shell脚本。二、实验内容 1.编写不同功能的脚本程序。 2.利用chmod修改文件权限。 3.掌握脚本文件执行的方法。三、主要实验步骤 1.创建一个名为zs_lab7的目录，下边实验步骤都在…...

编程日记 2025/7/19 1:03:35

FlaskRestfulAPI接口的初步认识

FlaskRestfulAPI 介绍记录学习 Flask Restful API 开发的过程项目来源：【Flask Restful API教程-01.Restful API介绍】我的代码仓库：https://gitee.com/giteechaozhi/flask-restful-api.git 后端API接口实现功能：数据库访问控制&#xf…...

编程日记 2025/7/21 15:15:52

自定义错误码的必要性

为什么要使用错误码，直接返回一个错误信息不好么？ 下面介绍一下，在程序开发中使用错误码的必要性~ 便于排查问题想象你开了一家奶茶店，顾客下单后可能出现各种问题： 没珍珠了（错误码：50…...

编程日记 2025/7/19 19:49:08

快手砍掉本地生活的门槛

一场本地商家的效率革命。作者|景行编辑|杨舟 “两斤鸡翅根七块九，两盒蓝莓九块钱，两公斤卫生纸十四块九一提。” 这是朝阳佳惠超市，在快手一则普通的短视频内容。佳惠超市在辽宁省朝阳市有22家分店，打开佳惠超市的相关快手…...

编程日记 2025/7/16 5:55:20

Python+Word实现周报自动化的完整流程

一、技术方案概述自动化报表解决方案基于以下技术组件： Python 作为核心编程语言python-docx 库用于处理 Word 文档pandas 库用于数据处理和分析matplotlib 或 plotly 库用于数据可视化Word 模版作为报表的基础格式这种方案的优势在于：保留了 Word 文…...

编程日记 2025/7/20 21:00:52

PCIE Spec ---Base Address Registers

7.5.1.2.1 Base Address Registers (Offset 10h - 24h) 在 boot 到操作系统之前，系统软件需要生产一个内存映射的 address map ，用于告诉系统有多少内存资源，以及相应功能需要的内存空间，所以在设备的 PCI 内存空间中就有了这个 …...

编程日记 2025/7/23 1:26:22

list的学习

list的介绍 list文档的介绍 list是可以在常数范围内在任意位置进行插入和删除的序列式容器，并且该容器可以前后双向迭代。list的底层是双向链表结构，双向链表中每个元素存储在互不相关的独立节点中，在节点中通过指针指向其前一个元素和后一…...

编程日记 2025/7/10 9:10:51

numpy、pandas内存优化操作整理

前言 python作为一款不怎么关注数据类型的语言，不同类型的数据可以往同一个变量中放置这也就直接导致，作为熟悉C这种一个变量只有一个类型的程序员来说，在解读python程序时，想搞清楚变量中到底存的是什么数据类型的时候时常很头…...

编程日记 2025/7/22 12:11:47

相关文章：