vue+element锚点跳转+自动感应导航栏

最近来个需求，要做一个页面，每个模块都是百分百全屏且右侧有个导航栏能自动感应在哪个模块,点击也能直接跳转到该锚点。

其实难点也就那几个，慢慢捋一下就好，话不多说上代码！！

1、锚点跳转且点击哪个会模块右侧导航栏就会高亮

在这里插入图片描述

我这个导航栏是因为未来增加模块以免还要自己手动加了就直接调接口循环了，如果是固定的直接写死也行，看见那个:key=“key”了没，对，你想的没错，跟那个没关系 😏,好了，不开玩笑了，那个给他动态赋予class的属性才是正确答案。

思路

使用循环的key与点击后传过去的key做对比，如果一样的话就给他添加相应的css。

具体实现

把传过去的key赋值给一个data里面的变量例如:index，然后在标签里使用三目运算符进行判断

这个也不算难点 ，还有很多种实现方法，比如通过路由判断、还有通过传路由判断，看个人喜欢与习惯吧。

2、关于翻页自动感应

思路

前面说了，我们是使用index来控导航栏中哪个模块高亮的 当鼠标往下滚动时让整个页面往下滚动整个页面的高度且index加一反之减一

具体实现

<div @mousewheel="mouseWheel"></div>
mouseWheel(e) {
if (e.wheelDelta || e.detail) {
if (e.wheelDelta > 0 || e.detail < 0) {
 // 当鼠标向上滚动时触发
}
if (e.wheelDelta < 0 || e.detail > 0) {
 // 当鼠标向下滚动时触发
}
}
}

在最外层容器中加入这个鼠标触发事件 然后就可以监听鼠标滚轮向上还是向下了

呃…想详细了解的朋友自行百度哈，这里不过多赘述

当鼠标向下滚动时我们使用

window.scrollTo(x,y);

来让页面进行滚动且让index加一反则减一

这样一来就能实现导航栏的自动感应了

但是要注重几个细节问题

第一、当你到达了顶部或者底部时需要重置你的index 第二、你加的高度变量要重置 第三、滚到底部或者顶部时需要取消终止滚动函数

以上就是自动感应导航栏的实现了，如果有不明白的朋友可以评论或者私信讨论。

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=1vkujvhqpg4v