这是我参与「第四届青训营 」笔记创作活动的第6天，这篇文章是对如何具体实现一个目录组件的详细代码分析，你将学到什么，你可能什么都学不到🤣(bushi)。

我们承接上篇juejin.cn/post/712633… 这里我们就来好好探讨一下如何从代码的角度实现这个组件

第一步

我们需要的在组件内部获取到全局派发的状态(我使用的是pinia),在组件的列表中遍历这个渲染这个列表

第二步

在这个组件内监听浏览器的滚动事件，每次都将列表中最靠近浏览器的元素的id设置为被激活的id，在视图层，用三元表达式判断当前的id是否等于被激活的id，从而赋予对应的class类名。

第三步

我们需要获取列表的dom元素，这是为啥呢？因为当被激活的id的更改时，我们需要让列表向上或者向下滚动，滚动多少距离呢？一开始我想的是获取最新id与之前id对应在列表中的索引，通过watch监听的方式，根据两个索引大于0或小于0移动，但是很快我就发现，这种考虑只适用于滚动变化，如果用户进行的是跳转变化呢？所以我们需要将其改为两个索引的差乘上每个列表元素的高度。

第四步

如果你能实现前面三步恭喜你，你已经实现掘金原版的目录列表了，但是我再此基础上多加了一个功能就是跳转的时候具有过度效果 如何实现呢首先我们需要在用户点击跳转后，将目标赋值给浏览器滚动条的值赋值给一个代理的对象，这里我用VueUse的useTransition实现的，这样的话useTransition返回的对象就会开始缓慢变化，接着我们监听这个值的变化，每次变化就讲这个值赋值给浏览器滚动条。 到了这里我们基本实现了，但是还有一个小bug，那就是这个缓动值的初始值，应该是要随着激活id的变化而变化的，但是在过渡跳转的过程中不能变化。所以我们需要一个值代表现在是不是过渡状态，如果是过渡状态就禁用在监听id中缓动值的变化，如果不是就禁用禁停缓动值变化的时候执行的赋值语句 为了实现这个步骤我们需要在用户点击跳转后，就改变过渡状态的值，并启动一个定时器在过渡事件结束后，将其还原。