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

news2024/9/22 7:29:52

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