Vue 3 实现左侧列表点击跳转滚动到右侧对应区域的功能

使用 Vue 3 实现左侧列表点击跳转到右侧对应区域的功能

1. 引言

在这篇博客中,我们将展示如何使用 Vue 3 实现一个简单的页面布局,其中左侧是一个列表,点击列表项时,右侧会平滑滚动到对应的内容区域。这种布局在很多应用场景中都非常常见,比如目录导航、问答系统等。

2. 效果图

在这里插入图片描述
在这里插入图片描述

3. 代码示例

demo.vue
<template><div class="container"><div class="sidebar"><ul><li v-for="item in items" :key="item.id" @click="jump(item)">{{ item.name }}</li></ul></div><div class="content"><divv-for="item in items":key="item.id":ref="el => setCombinationRef(el, `comb-${item.id}`)"class="content-item"><h2>{{ item.name }}</h2><p>{{ item.description }}</p></div></div></div>
</template><script setup>
import { reactive, nextTick } from 'vue';// 示例数据
const items = [{ id: 1, name: 'Item 1', description: 'Description for Item 1' },{ id: 2, name: 'Item 2', description: 'Description for Item 2' },{ id: 3, name: 'Item 3', description: 'Description for Item 3' },{ id: 4, name: 'Item 4', description: 'Description for Item 4' },{ id: 5, name: 'Item 5', description: 'Description for Item 5' },{ id: 6, name: 'Item 6', description: 'Description for Item 6' },{ id: 7, name: 'Item 7', description: 'Description for Item 7' },{ id: 8, name: 'Item 8', description: 'Description for Item 8' },{ id: 9, name: 'Item 9', description: 'Description for Item 9' },{ id: 10, name: 'Item 10', description: 'Description for Item 10' },{ id: 11, name: 'Item 11', description: 'Description for Item 11' },{ id: 12, name: 'Item 12', description: 'Description for Item 12' },{ id: 13, name: 'Item 13', description: 'Description for Item 13' },{ id: 14, name: 'Item 14', description: 'Description for Item 14' },{ id: 15, name: 'Item 15', description: 'Description for Item 15' },{ id: 16, name: 'Item 16', description: 'Description for Item 16' },{ id: 17, name: 'Item 17', description: 'Description for Item 17' },{ id: 18, name: 'Item 18', description: 'Description for Item 18' },{ id: 19, name: 'Item 19', description: 'Description for Item 19' },{ id: 20, name: 'Item 20', description: 'Description for Item 20' }
];// 使用reactive创建一个响应式的对象来存储refs
const combinationRefs = reactive({});// 动态设置ref
const setCombinationRef = (element, id) => {if (element) {combinationRefs[id] = element;}
};// 提供一个方法来获取特定的ref
const getCombinationRef = id => {return combinationRefs[id];
};// 跳转到对应小题的位置
const jump = async item => {const el = getCombinationRef(`comb-${item.id}`);if (el) {await nextTick();el.scrollIntoView({ behavior: 'smooth' });}
};
</script><style scoped>
.container {display: flex;
}.sidebar {width: 200px;border-right: 1px solid #ccc;padding: 10px;
}.sidebar ul {list-style: none;padding: 0;
}.sidebar li {cursor: pointer;padding: 5px 0;
}.sidebar li:hover {background-color: #f0f0f0;
}.content {flex: 1;padding: 10px;
}.content-item {margin-bottom: 20px;padding: 10px;border: 1px solid #ccc;
}
</style>
实现跳转功能

在点击左侧列表项时,我们需要跳转到右侧对应的内容区域。为此,我们需要:

  • 使用 ref 获取每个内容区域的 DOM 元素。
  • 在点击事件中调用 scrollIntoView 方法,实现平滑滚动。
// 使用reactive创建一个响应式的对象来存储refs
const combinationRefs = reactive({});// 动态设置ref
const setCombinationRef = (element, id) => {if (element) {combinationRefs[id] = element;}
};// 提供一个方法来获取特定的ref
const getCombinationRef = id => {return combinationRefs[id];
};// 跳转到对应小题的位置
const jump = async item => {const el = getCombinationRef(`comb-${item.id}`);if (el) {await nextTick();el.scrollIntoView({ behavior: 'smooth' });}
};

结论

通过以上步骤,我们成功实现了一个简单的 Vue 3 页面布局,左侧是一个列表,点击列表项时,右侧会平滑滚动到对应的内容区域。这种布局和滚动效果在实际开发中非常常见,希望这篇博客对你有所帮助。

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

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

相关文章

Llama 3.1 405B 详解

2024 年 7 月 23 日星期二&#xff0c;Meta 宣布推出 Llama 3.1&#xff0c;这是其Llama 系列大型语言模型 (LLM)的最新版本。虽然只是对 Llama 3 模型进行小幅更新&#xff0c;但它特别引入了Llama 3.1 405B——一个 4050 亿参数的模型&#xff0c;这是迄今为止世界上最大的开…

力扣刷题录——链表

一、移除链表元素 移除链表元素 法一&#xff1a;不使用虚拟头节点 ListNode* removeElements(ListNode* head, int val) {//若删除头节点while(head!NULL&&head->valval)//连续删除头节点的条件{headhead->next;} //删除其他节点&#xff08;先判断是不是空链…

【Qt 关于信号和槽 的参数类型和参数顺序关系】

前言&#xff1a;信号的参数类型和参数顺序一定要严格要求并且指明&#xff08;特别是当同一信号会发出不同参数类型和顺序的信号时&#xff09;&#xff0c;槽会根据参数类型和参数顺序进行匹配相应的槽函数&#xff0c;期间槽函数的自动类型匹配也可以生效。 信号定义&#x…

运行ruoyi

nacos 数据库配置 修改nacos/conf/application.properties 单机版运行 startup.cmd -m standalone redis 运行后端 运行gateway,auth,modules/system模块 可能遇到的问题&#xff1a;端口正在使用 解决 netstat -ano | findstr 9200 taskkill -pid 18284 -f

JAVA同城圈子达人交友系统源码支持微信小程序+公众号+H5+APP

&#x1f308; 同城圈子达人交友系统&#xff0c;遇见志同道合的TA&#xff01; &#x1f389; 开篇&#xff1a;告别孤单&#xff0c;同城圈子等你来探索&#xff01; 在这个快节奏的城市生活中&#xff0c;你是否常常感到孤独&#xff0c;渴望找到一群志同道合的朋友&#…

发现洗白的公开伎俩

利益方把事件A和事件B放在一起&#xff0c;事件A和事件B有明显逻辑冲突&#xff0c;故意把A和B在一起炒大。一段时间就有人利用逻辑冲突来故意辟谣&#xff0c;把事件真实全部否定&#xff0c;达到舆论上既没有做A或其相关事项&#xff0c;也没有做B或其相关事项的目的&#xf…

Elasticsearch基础(六):使用Kibana Lens进行数据可视化

文章目录 使用Kibana Lens进行数据可视化 一、进入Kibana Lens 二、基础可视化 1、指标可视化 2、垂直堆积条形图 3、表格 三、高级可视化 1、多图层和索引 2、子桶 3、树状图 使用Kibana Lens进行数据可视化 一、进入Kibana Lens 在Kibana主页&#xff0c;单击页面…

【资料分享】2024钉钉杯大数据挑战赛A题思路解析+代码演示

2024第三届钉钉杯大学生大数据挑战赛今天已经开赛&#xff0c;【A题】思路解析代码&#xff0c;资料预览&#xff1a;

Conda的守护神:包兼容性测试全指南

Conda的守护神&#xff1a;包兼容性测试全指南 在软件开发中&#xff0c;确保不同软件包之间的兼容性是维护项目稳定性的关键。Conda&#xff0c;作为广泛使用的包管理器和环境管理器&#xff0c;提供了强大的工具来测试包的兼容性。本文将深入探讨如何在Conda中使用包兼容性测…

使用 Java 监听和处理 POST 请求

各类学习教程下载合集 ​​https://pan.quark.cn/s/874c74e8040e​​ 在现代 Web 开发中&#xff0c;监听和处理 HTTP POST 请求是常见的任务之一。无论是构建 RESTful API 还是处理表单提交&#xff0c;Java 都提供了强大的工具和库来实现这一功能。本文将介绍如何使用 Java…

【JAVA学习笔记】找不到依赖项 ‘org.springframework.boot:spring-boot-starter-web:3.0.5‘

如果环境都是跟着教程配的话&#xff0c;并且上网搜了一圈询问gpt都没发现对应长得像的错误&#xff0c;那么试试**刷新一下Maven项目**&#xff0c;可能问题就自己解决了。如果这样解决不了再查到底是什么地方没有配置对。&#xff08;我第一次遇到这个问题的时候搜了半天都不…

RHEL8.6配置yum仓库

记录通过Linux安装ISO挂载yum仓库&#xff0c;由于没有在线仓库只能挂载iso的软件仓库 [rootlocalhost /]# yum install libicu 正在更新 Subscription Management 软件仓库。 无法读取客户身份本系统尚未在权利服务器中注册。可使用 subscription-manager 进行注册。错误&…

遇到 chunk of umi not found 处理办法

1、删除 以下文件 &#xff08;1&#xff09;node_modules 其中快速删除node_modules方法可参考&#xff1a;rimraf快速删除node_modules方法-CSDN博客文章浏览阅读258次。rimraf快速删除node_modules方法https://blog.csdn.net/2401_85955297/article/details/140566245?spm…

md,感觉enable_if的推导过程又迷糊了。这次好像又清晰了一些

通过这几个例子&#xff0c;暂时有个结论&#xff1a; 基本就是&#xff1a;由泛型版本定下参数列表里的参数&#xff0c; 编译成功&#xff1a;template<bool _Test, class _Ty void> struct enable_if123;template<class _Ty> struct enable_if123<true, _T…

微信小游戏之 三消(一)

首先设定一下 单个 方块 cell 类&#xff1a; 类定义和属性 init 方法 用于初始化方块&#xff0c;接收游戏实例、数据、宽度、道具类型和位置。 onWarning 方法 设置警告精灵的帧&#xff0c;并播放闪烁动作&#xff0c;用于显示方块的警告状态。 grow 方法 根据传入的方向…

网络基础之(11)优秀学习资料

网络基础之(11)优秀学习资料 Author&#xff1a;Once Day Date: 2024年7月27日 漫漫长路&#xff0c;有人对你笑过嘛… 全系列文档可参考专栏&#xff1a;通信网络技术_Once-Day的博客-CSDN博客。 参考文档&#xff1a; 网络工程初学者的学习方法及成长之路&#xff08;红…

【视频讲解】后端增删改查接口有什么用?

B站视频地址 B站视频地址 前言 “后端增删改查接口有什么用”&#xff0c;其实这句话可以拆解为下面3个问题。 接口是什么意思&#xff1f;后端接口是什么意思&#xff1f;后端接口中的增删改查接口有什么用&#xff1f; 1、接口 概念&#xff1a;接口的概念在不同的领域中…

【QT】QT 系统相关(事件、文件、多线程、网络、音视频)

一、Qt 事件 1、事件介绍 事件是应用程序内部或者外部产生的事情或者动作的统称。在 Qt 中使用一个对象来表示一个事件。所有的 Qt 事件均继承于抽象类 QEvent。事件是由系统或者 Qt 平台本身在不同的时刻发出的。当用户按下鼠标、敲下键盘&#xff0c;或者是窗口需要重新绘制…

追问试面试系列:JVM运行时数据区

hi 欢迎来到追问试面试系列之JVM运行时数据区,在面试中出现频率非常高,并且其中还存在一些误导性的面试,一定要注意。 什么误导性呢?面试中,有的面试官本来是想问JVM运行时数据区,不过提问时难免有些让你觉得很不爽。比如:你说说java内存模型,还比如说说JVM内存模型,…

昇思MindSpore学习入门-静态图高级编程技巧

如何优化编译性能 使用lazy_inline装饰器 神经网络模型的编译过程往往采用默认inline的方式&#xff0c;把层级的代码表达最终展开成一张扁平的计算图&#xff0c;一方面寻求最大的编译优化机会&#xff0c;另一方面也可以简化自动微分以及执行的逻辑。inline后形成的计算图包…