vue实现楼层跳转效果
作者：jiyuchengzhou
这篇文章主要为大家详细介绍了vue实现楼层跳转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现楼层跳转效果的具体代码，供大家参考，具体内容如下
实现效果：当翻滚页面时，对应的选项卡也会进行相应的变化，点击选项卡也会直接跳转到对应的位置
先是获取对应的dom元素，然后再监听滚动事件，判断符合条件的元素，进行改变对应的楼层选项卡位置。
jump方法则是通过点击直接跳转到对应的位置。
整个页面代码如下：
<template>
<div>
<h1>这是楼层测试的页面</h1>
<!-- 这是流程的目录 -->
<div class="totalM">
<div class="menu" @click="jump(0)" :class="[num==0?'sele':'']">1</div>
<div class="menu" @click="jump(1)" :class="[num==1?'sele':'']">2</div>
<div class="menu" @click="jump(2)" :class="[num==2?'sele':'']">3</div>
<div class="menu" @click="jump(3)" :class="[num==3?'sele':'']">4</div>
<div class="menu" @click="jump(4)" :class="[num==4?'sele':'']">5</div>
</div>
<!-- 这是楼层的内容 -->
<div>
<div class="h-800" style="background:red;"><h1>1</h1></div>
<div class="h-800" style="background:yellow;"><h1>2</h1></div>
<div class="h-800" style="background:blue;"><h1>3</h1></div>
<div class="h-800" style="background:black;"><h1>4</h1></div>
<div class="h-800" style="background:pink;"><h1>5</h1></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
num:0,
}
},
created() {
var that=this
var inner = document.getElementsByClassName('h-800');
// 注册滚动监听事件
window.onscroll = function() {
// 获取滚动条距离页面底部的距离
var tops = document.documentElement.scrollTop || document.body.scrollTop;
// console.log(tops)
//判断滚动的位置，从而改变楼层选项的样式
for(var i = 0; i < inner.length; i++) {
if(inner[i].offsetTop <= tops+200 && tops<=inner[i].offsetTop) {
that.num=i
}
}
}
},
methods: {
// 楼层跳转的方法index
jump(index){
this.num=index
var body = document.getElementsByTagName('body')[0];
// 获取所有的楼层
var inner = document.getElementsByClassName('h-800');
console.log(body)
console.log(inner)
console.log(index)
console.log(inner[index].offsetTop)
window.scrollTo(0,inner[index].offsetTop)
// document.body.scrollTop=inner[index].offsetTop
console.log(body.scrollTop)
}
},
}
</script>
<style scoped>
.h-800{
width: 100%;
height: 500px;
}
.totalM{
position: fixed;
width:100px;
background:gray;
right:100px;
bottom:100px;
}
.menu{
/* margin-bottom:10px; */
}
.sele{
background:white;
}
</style>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。