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

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

news 来源：原创 2024/9/20 18:50:49

使用 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' });}
};