vue+element实现锚点链接方式
作者：Zh.冠军
这篇文章主要介绍了vue+element实现锚点链接方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue+element锚点链接
代码块
<el-row id="userManagement">
<h1 @click="jump('userManagement')">用户管理</h1>
<el-col :span="24">为了正常使用知产魔方，您需要在用户管理模块中，为代理所内部用户、外部用户开通知产魔方使用权限。</el-col>
</el-row>
export default {
methods:{
jump(domId){
// 当前窗口正中心位置到指定dom位置的距离
//页面滚动了的距离
let height = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//指定dom到页面顶端的距离
let dom = document.getElementById(domId);
let domHeight = dom.offsetTop;
//滚动距离计算
var S = Number(height) - Number(domHeight);
//判断上滚还是下滚
if(S<0){
//下滚
S = Math.abs(S); //Math.abs返回一个数的绝对值
//window.scrollBy：把内容滚动到指定的像素数
window.scrollBy({ top: S, behavior: "smooth" });
}else if(S==0){
//不滚
window.scrollBy({ top: 0, behavior: "smooth" });
}else{
//上滚
S = -S
window.scrollBy({ top: S, behavior: "smooth" });
}
}
},
created() {}
}
效果图
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
- 第二、你加的高度变量要重置
- 第三、滚到底部或者顶部时需要取消终止滚动函数
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。