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

vue实现根据点击或滑动展示对应高亮

页面需求:

  • 点击左侧版本号,右侧展示对应版本内容并置于顶部
  • 右侧某一内容滚动到顶部时,左侧需要展示高亮

实现效果:

请添加图片描述

实现代码:

<template><div><div class="historyBox pd-20 bg-white"><div class="w100 flex h100" v-if="versionList.length > 0"><div class="left size-14"><divv-for="(item, index) in versionList":key="index"class="leftItem pd-10 pointer":class="index == activeIndex ? 'isActive' : ''"@click="gotoTarget(index)"><div>{{ item.versionNumber }}</div><div>{{ item.releaseTime }}</div></div></div><div class="right"><divv-for="(item, index) in versionList":key="index"class="rightItem pd-20 center":class="index == activeIndex ? 'isActive' : ''"><div v-html="item.versionDescription" class="ql-editor w60"></div></div></div></div><div class="w100 h100 center size-16 gray-2" v-else>暂无版本记录</div></div></div>
</template><script>
import { listAllVersion } from "./components/api";export default {name: "VersionHistory",data() {return {versionList: [], // 表格数据activeIndex: 0, // 高亮下标clickIndex: 0, // 点击下标scrollIndex: 0, // 滚动下标scrollStopTimer: null,};},created() {this.getList();},mounted() {},methods: {// 监听鼠标移入元素 、右侧父元素滚动checkItemsHover() {const rightBox = document.querySelector(".right");// 监听父容器的滚动事件rightBox.addEventListener("scroll", this.checkItemsAtTop);// 页面加载时也检查一次window.addEventListener("load", this.checkItemsAtTop);},// 监听元素 rightItem 触顶checkItemsAtTop() {const rightBox = document.querySelector(".right");const rightItems = Array.from(rightBox.querySelectorAll(".rightItem"));rightItems.forEach((item, index) => {// 使用 getBoundingClientRect 来获取元素相对于视口的位置const rect = item.getBoundingClientRect();const containerRect = rightBox.getBoundingClientRect();// 判断元素是否触顶父容器if (rect.top - containerRect.top <= 0 &&rect.bottom - containerRect.top >= 0) {this.scrollIndex = index;// this.activeIndex = index;}// 清除之前的定时器,防止重复触发if (this.scrollStopTimer) {clearTimeout(this.scrollStopTimer);}// 设置新的定时器,在滚动停止后延迟指定时间触发this.scrollStopTimer = setTimeout(this.onScrollStopped, 150); // 150ms 的延迟可以根据需要调整});},// 滚动停止后的回调函数onScrollStopped() {// console.log("滚动停止了", this.scrollIndex, this.clickIndex);// 在这里放置你希望在滚动停止后执行的代码if (this.scrollIndex < this.clickIndex) {this.activeIndex = this.clickIndex;this.clickIndex = 0;} else {this.activeIndex = this.scrollIndex;}const leftItems = document.querySelectorAll(".leftItem");const leftBox = document.querySelector(".left");const targetLeftItem = leftItems[this.activeIndex];// 计算目标元素距离父容器顶部的距离const offsetTop = targetLeftItem.offsetTop - leftBox.offsetTop;// 使用 scrollTo 方法让父容器滚动到目标元素的位置leftBox.scrollTo({top: offsetTop,behavior: "smooth", // 如果需要平滑滚动,请确保父容器设置了 scroll-behavior: smooth;});},// 定义当鼠标移入时触发的函数gotoTarget(index) {// this.scrollIndex = index;this.clickIndex = index;this.activeIndex = index;const rightItems = document.querySelectorAll(".rightItem");const rightBox = document.querySelector(".right");const targetRightItem = rightItems[index];/* // 使用 scrollIntoView 方法让目标元素滚动到视图顶部targetRightItem.scrollIntoView({ behavior: "smooth", block: "start" }); */// 计算目标元素距离父容器顶部的距离const offsetTop = targetRightItem.offsetTop - rightBox.offsetTop + 1;// 使用 scrollTo 方法让父容器滚动到目标元素的位置rightBox.scrollTo({top: offsetTop,behavior: "smooth", // 如果需要平滑滚动,请确保父容器设置了 scroll-behavior: smooth;});},/** 查询列表 */getList() {listAllVersion().then((response) => {this.versionList = response.data;// .concat(response.data)// .concat(response.data)// .concat(response.data)// .concat(response.data);this.$nextTick(() => {this.checkItemsHover();});});},},
};
</script>
<style lang="scss" scoped>
@import "./components/quill.snow.css";
.historyBox {height: calc(100vh - 90px);::-webkit-scrollbar {width: 6px;// height: 24px;}/* 滚动槽的样式设置 */::-webkit-scrollbar-track {background: #eee;}/* 滚动条滑块的样式设置 */::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.1);background: rgb(158, 203, 255);border-radius: 12px;&:hover {background: rgb(95, 169, 253);}}.left {width: 260px;min-width: 260px;height: 100%;// height: calc(100vh - 117px);overflow-y: auto;.leftItem {display: flex;justify-content: space-evenly;align-items: center;border: 1px solid #eee;}.isActive {border: 1px solid #3f8cff;border-left: 4px solid #3f8cff;color: #3f8cff;background: rgba(63, 140, 255, 0.1);font-weight: bold;}}.right {box-sizing: border-box;width: calc(100% - 260px);height: 100%;// height: calc(100vh - 117px);overflow-y: auto;background: #eef6ff;.rightItem {border: 1px dotted #eef6ff;&:hover {border: 1px dotted #ddd;}.w60 {width: 60%;}}.isActive {// border: 1px dotted #ddd;border: 1px dotted #3f8cff;// box-shadow: 0px 0px 20px #3f8cff;// box-shadow: 0px 5.04px 10.08px rgba(55, 114, 233, 0.22),//   inset 0px 5.04px 10.08px rgba(211, 221, 242, 1);}}
}
</style>

相关文章:

vue实现根据点击或滑动展示对应高亮

页面需求&#xff1a; 点击左侧版本号&#xff0c;右侧展示对应版本内容并置于顶部右侧某一内容滚动到顶部时&#xff0c;左侧需要展示高亮 实现效果&#xff1a; 实现代码&#xff1a; <template><div><div class"historyBox pd-20 bg-white">…...

java练习(41)

ps&#xff1a;题目来自力扣 最接近的三数之和 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数&#xff0c;使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解。 import java.util.Arrays;class Solut…...

【二分查找 图论】P8794 [蓝桥杯 2022 国 A] 环境治理|普及

本文涉及的基础知识点 本博文代码打包下载 C二分查找 C图论 [蓝桥杯 2022 国 A] 环境治理 题目描述 LQ 国拥有 n n n 个城市&#xff0c;从 0 0 0 到 n − 1 n - 1 n−1 编号&#xff0c;这 n n n 个城市两两之间都有且仅有一条双向道路连接&#xff0c;这意味着任意两…...

Docker镜像面试题及参考答案

目录 Docker 镜像与容器的关系是什么?如何理解 “镜像为静态定义,容器为运行时实体”? 解释 Docker 镜像的联合文件系统(UnionFS)分层机制,为何这种设计能优化存储效率? Docker 镜像的 LABEL 标签有什么作用?如何通过标签管理多版本镜像? 镜像的 latest 标签有哪些…...

浅显易懂HashMap的数据结构

HashMap 就像一个大仓库&#xff0c;里面有很多小柜子&#xff08;数组&#xff09;&#xff0c;每个小柜子可以挂一串链条&#xff08;链表&#xff09;&#xff0c;链条太长的时候会变成更高级的架子&#xff08;红黑树&#xff09;。下面用超简单的例子解释&#xff1a; ​壹…...

Fisher信息矩阵与Hessian矩阵:区别与联系全解析

Fisher信息矩阵与Hessian矩阵&#xff1a;区别与联系全解析 在统计学和机器学习中&#xff0c;Fisher信息矩阵&#xff08;FIM&#xff09;和Hessian矩阵是两个经常出现的概念&#xff0c;它们都与“二阶信息”有关&#xff0c;常用来描述函数的曲率或参数的敏感性。你可能听说…...

【HTML— 快速入门】HTML 基础

准备工作 vscode下载 百度网盘 Subline Text 下载 Sublime Text下载 百度网盘 vscode 下载 Sublime Text 是一款轻量好用的文本编辑器&#xff0c;我们在写前端代码时&#xff0c;使用 Sublime Text 打开比使用记事本打开&#xff0c;得到的代码体验更好&#xff0c;比 vscode…...

Docker 与 Serverless(无服务器架构)

Serverless&#xff08;无服务器架构&#xff09; 是一种新的云计算架构&#xff0c;它通过让开发者专注于业务逻辑而无需管理服务器基础设施&#xff0c;来简化应用的开发和部署。Serverless 模型通常由云服务提供商管理基础设施的所有方面&#xff0c;而开发者只需提供代码和…...

DMA 定制固件教程:小白跟做即得单人固件,超详细纯喂饭教程,100% 成功秘籍!FPGA仿真1:1、中断逻辑和TLP核心都在。

DMA 定制固件教程 小白跟着操作做可以做出的单人固件 图文教程 链接&#xff1a;https://docs.qq.com/doc/DQ01lVGtHelROVHNv 本图文教程包含内容&#xff1a; 一、DMA仿真技术采集真实单人固件 二、网卡TLP仿真固件生成 三、DMA仿真技术io、中断逻辑&#xff0c;从零仿真 四、…...

嵌入式开发:傅里叶变换(4):在 STM32上面实现FFT(基于STM32L071KZT6 HAL库+DSP库)

目录 步骤 1&#xff1a;准备工作 步骤 2&#xff1a;创建 Keil 项目&#xff0c;并配置工程 步骤 3&#xff1a;在MDK工程上添加 CMSIS-DSP 库 步骤 5&#xff1a;编写代码 步骤 6&#xff1a;配置时钟和优化 步骤 7&#xff1a;调试与验证 步骤 8&#xff1a;优化和调…...

飞鱼科技游戏策划岗内推

协助策划完成相关工作&#xff0c;包括但不仅限于策划配置&#xff0c;资料搜集&#xff0c;游戏体验&#xff1b; 游戏策划相关作品&#xff1b;游戏大赛经历&#xff1b;游戏demo制作经历&#xff1b;游戏公司策划岗位实习经历优先 内推码 DSZP7YFU...

前端如何进行性能优化

1. 减少HTTP请求 合并文件&#xff1a;将多个CSS或JavaScript文件合并为一个&#xff0c;减少请求次数。 使用CSS Sprites&#xff1a;将多个小图标合并为一张大图&#xff0c;通过背景定位显示。 内联小资源&#xff1a;将小的CSS或JavaScript直接嵌入HTML中&#xff0c;减少…...

大白话Vuex 核心概念(state、mutations、actions)的使用案例与原理

大白话Vuex 核心概念&#xff08;state、mutations、actions&#xff09;的使用案例与原理 Vuex是Vue.js应用程序中专门用来管理状态的工具&#xff0c;就好像是一个大管家&#xff0c;帮你把项目里一些重要的数据和操作管理得井井有条。下面用大白话结合案例来介绍Vuex核心概…...

阿里云ack的创建与实战应用案例

阿里云ack的创建与应用案例 创建前开通ack相关服务&#xff1a;开始创建简单的魔方游戏&#xff0c;熟悉sv与clb自动注册创建部署一个nginx 服务示例&#xff1a;走不同域名访问不同svc资源&#xff1a;为什么需要 Ingress &#xff1f;创建第一个域名的 Deployment和Service。…...

鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar)

鸿蒙开发深入浅出01&#xff08;基本环境搭建、页面模板与TabBar&#xff09; 1、效果展示2、下载 DevEco Studio3、创建项目4、新建页面模板5、更改应用信息6、新建以下页面7、Index.ets8、真机运行9、图片资源文件 1、效果展示 2、下载 DevEco Studio 访问官网根据自己的版本…...

Vue组件:从使用到原理的深度解析

一、什么是Vue组件&#xff1f; 组件是Vue的核心特性之一&#xff0c;它允许开发者将UI拆分为独立可复用的代码片段。每个组件本质上是一个Vue实例&#xff0c;具有自己的&#xff1a; 模板&#xff08;Template&#xff09; 数据&#xff08;Data&#xff09; 方法&#xf…...

Docker部署 MongoDB及常用命令

docker 部署 docker run -d \--name mongo \-e MONGO_INITDB_ROOT_USERNAMEroot \-e MONGO_INITDB_ROOT_PASSWORD123456 \-p 27017:27017 \-v ./local-mongo-data:/data/db \mongo:latest或者编写 docker-compose.yaml 文件。如下&#xff1a; version: 3.1services:mongo:im…...

27.[前端开发-JavaScript基础]Day04-函数基本使用-递归-变量作用域-函数式编程

一、JavaScript函数 1 认识JavaScript函数 程序中的foo、bar、baz 认识函数 函数使用的步骤 2 函数的声明和调用 声明和调用函数 函数的参数 有参数的函数练习 函数的返回值 函数的练习 arguments参数&#xff08;JS高级再学习&#xff09; 3 函数的递归调用 函数中调用函数…...

mac修改docker的daemon.json 镜像文件

1、找到daemon.json文件的位置 docker info 可以看出位置在&#xff1a; /Users/spuer/.docker 2. 进入daemon.json 所在的目录&#xff1a; cd /Users/spuer/.docker3. 查看daemon.json的内容&#xff1a; more daemon.json可以看出&#xff0c;没有配置registry-mirrors&…...

KIMI K1.5:大规模强化学习在大语言模型中的应用与工程实践

目录 1、核心技术创新:长上下文强化学习 2、策略优化的技术细节 2.1、在线镜像下降变体 2.2、长度惩罚机制 2.3、智能采样策略 3、工程架构创新 3.1、混合部署框架 3.2、代码沙箱与奖励模型 3.3、分布式系统架构 4、实验成果与性能提升 5、结论与未来展望 大语言模…...

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...