vue楼层跳转
jiyuchengzhou 人气:0实现效果:当翻滚页面时,对应的选项卡也会进行相应的变化,点击选项卡也会直接跳转到对应的位置
先是获取对应的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>
加载全部内容