vue跳转页面的几种方法,vue如何实现页面跳转
这篇文章主要为大家详细介绍了某视频剪辑软件实现楼层跳转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现楼层跳转效果的具体代码，供大家参考，具体内容如下
实现效果：当翻滚页面时，对应的选项卡也会进行相应的变化，点击选项卡也会直接跳转到对应的位置
先是获取对应的数字正射影像图元素，然后再监听滚动事件，判断符合条件的元素，进行改变对应的楼层选项卡位置。
跳跃方法则是通过点击直接跳转到对应的位置。
整个页面代码如下：
模板
差异
氕这是楼层测试的页面/h1
！-这是流程的目录-
div class="总计m "
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 class= h-800 style= background:red；h11/h1/div
div class= h-800 style= background:yellow；h12/h1/div
div class= h-800 style= background:blue；h13/h1/div
div class= h-800 style= background:black；h14/h1/div
div class= h-800 style= background:pink；h15/h1/div
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
数字：0,
}
},
已创建(){
变那个=这个
var inner=document。getelementsbyclassname( h-800 )；
//注册滚动监听事件
window.onscroll=function() {
//获取滚动条距离页面底部的距离
var tops=文档。文档元素。向上滚动 文档。身体。滚动顶部；
//console.log(tops)
//判断滚动的位置，从而改变楼层选项的样式
for(var I=0；我。内部长度；i ) {
如果(内心[我]。offsetTop=tops 200 tops=inner[i].offsetTop) {
that.num=i
}
}
}
},
方法：{
//楼层跳转的方法指数
跳转（索引){
this.num=索引
var body=文档。getelementsbytagname( body )[0]；
//获取所有的楼层
var inner=document。getelementsbyclassname( h-800 )；
console.log(body)
console.log(内部)
console.log(索引)
console.log(内部[索引])。offsetTop)
window.scrollTo(0，inner[index].offsetTop)
//文档。身体。scroll top=inner[index].抵消
console.log(body.scrollTop)
}
},
}
/脚本
样式范围。h-800
宽度：100%;
高度：500像素
}。总计m
位置：固定；
宽度：100像素
背景：灰色；
右：100像素
底部：100像素
}。菜单{
/*边距-底部：10px*/
}。选择（分类）
背景：白色；
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。