项目背景 & 痛点

在 PC 端业务程序里经常会遇到「字母索引」的需求，比如通讯录、商品列表等。按理说，传统做法往往是：

• 手动写死左侧列表的滚动逻辑。代码冗余且易出错，不过，
• 滚动时同步右侧高亮状态卡顿。使用者体验差，
• 缺少组件化封装。其他页面只能复制粘贴，维护成本高。

这些痛点让开发者在每个项目中都要重复造轮子，耗时又不可靠。老实说，下面给出一个基于 Vue3 的简易「索引列表」组件。实现左侧列表与右侧字母索引的联动，并提供后续调整思路。

一、组件结构概览

主要实现要点

• 同步高亮当前可视区顶部所在的章节。实现右侧索引实时高亮，
• 平滑定位mouseEnterHandle 使用原生 scrollIntoView避免手写动画导致卡顿。
• 组件化封装仅通过三个 Props（indexs/list/indexScale) 和一个事件 即可复用。
• 可 性SCSS 使用 BEM 思路组织，可自行覆盖样式；说起来，未实现的自适应宽度、虚拟滚动等均留有注释位置。

二、使用示例

// 引入组件
import IndexList from '@/components/IndexList/index.vue'
function chooseHandle{
console.log
}

运行效果

三、进一步调整建议

1. 防抖/节流细化

Pain point: 滚动时频繁触发计算导致卡顿。

• 将 scrollHandle 中的防抖时间调至 { leading:true。trailing:true } 
• If list is huge,consider using IntersectionObserver 替代手算 offset。

2. 虚拟化渲染

Pain point: #DOM 大量渲染导致页面卡顿与内存使用升高。

• Avoid rendering all sections at once. Use libraries like .
• The data structure stays same – only rendering layer changes.
• This brings FPS 回到60+，即使是几千条记录也毫无压力。不过，

3. 响应式容器尺寸

Pain point: #左侧宽度和右侧索引栏在窗口缩放后失配。话说回来，

• Add a @resize.native="widthChange"  to recalculate .left width = containerWidth - rightWidth - gap.
• This makes component truly “自适应”。

4. 可配置化提高

Pain point: #硬编码颜色、字体大小等样式难以统一风格。

manualScrollOffsetNumber-If you want a custom offset when scrolling to a section.

bounceEffectEnabled Boolean trueEnable/disable bounce effect on mouse wheel.

* more ...

​

​ ​​

​​

​​​

​ ​

小结

• 快速实现上述代码已能满足大多数业务场景，只需复制 IndexList.vue 就可以使用。老实说，
• 性能提高通过防抖、虚拟化还有 ResizeObserver。可把「卡顿」「不响应」的问题彻底根除。怎么说呢，
• 可维护性统一 Props 与事件设计。让团队成员只需阅读文档就可以完成二次开发。

祝大家玩得开心 🎉！