使用 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">
<div
v-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 页面布局,左侧是一个列表,点击列表项时,右侧会平滑滚动到对应的内容区域。这种布局和滚动效果在实际开发中非常常见,希望这篇博客对你有所帮助。