页面跳转

页面

<template><div class="groups"id="groups"><!-- 导航 --><div class="group-list"><div v-for="item in groupList":key="item.id":class="`group-menu ${groupId==item.id ? 'select-menu' :''}`"><div class="name"@click="selectMenu(item)">{{ item.name }}</div></div></div><!-- 内容 --><div v-for="(item,index) in  groupList":key="index":id="item.key">内容信息</div></div>
</template>

script

 <script>
export default {name: 'groups',components: {pages,groupCard,},data() {return {groupList: [{ name: '第一组', id: '-1', key: 'dyz', orderIndex: 0 },{ name: '第二组', id: '1', key: 'dez', orderIndex: 10 },{ name: '第三组', id: '2', key: 'dsz', orderIndex: 20 },],groupId: '-1',}},methods: {//选择方法selectMenu(item) {this.groupId = item.idconst returnEle = document.querySelector('#' + item.key)returnEle.scrollIntoView(true)},
}
</script>

style

<style scoped  lang="less">
.groups {height: 100vh;background-color: #f5f7f9;overflow: auto;
}
.group-card {margin-bottom: 20px;
}
.group-menu {padding: 12px 20px;cursor: pointer;border-bottom: 1px solid #e8eaec;display: flex;align-items: center;align-content: center;justify-content: space-between;.group-btn {display: flex;align-items: center;align-content: center;}
}
.select-menu {color: blue;
}
.group-list {padding: 10px;border: 1px solid #eee;border-radius: 10px;
}

进阶版：随着页面滚动变换导航菜单样式

监听页面滚动方法

  methods:{handleScroll() {//获取滚动时的高度let scrollTop = document.querySelector('#groups').scrollTop//判断当前页面高度this.groupList.map((item) => {//导航对应的div的位置let nowScroll = document.querySelector('#' + item.key).offsetTop//nowScroll-100是为了让滚动留有余地而不是一超过当前导航位置就变换样式if (nowScroll-100 <= scrollTop) {this.groupId = item.id}})},},mounted() {window.addEventListener('scroll', this.handleScroll, true)},

销毁滚动

  destroyed() {document.removeEventListener('scroll', this.handleScroll)},

Vue 页面跳转到指定位置相关推荐

html导航栏页面切换的js,js实现页面滚动切换导航栏/点击导航栏跳转到指定位置...
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.getElemen ...
js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
最近一直在弄页面的事情,对页面方面的知识又巩固了一下.这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言! js部分 //标题对象 var title = document.get ...
vue页面跳转后返回原页面初始位置
vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的 ...
锚点定位跳转到指定位置回到顶部功能
一.跳转到指定位置项目中数据较多,但是要在一个页面展示出来,就会需要定位功能. 例如淘宝中点击某个商品的分类会跳转到对应的模块,模块中是详细的商品信息数据 arrayList:[{ //不一一列出 ...
recycleview 使用详解，添加头部尾部，混合item，侧滑菜单，跳转到指定位置，实现九宫格布局
添加头部尾部,混合item:https://blog.csdn.net/meixi_android/article/details/82256319 侧滑菜单:https://blog.csdn.ne ...
RecyclerView跳转到指定位置，RecyclerView上下滑动监听，RecyclerView滑动速度
1.RecyclerView跳转到指定位置只需调用recycleview的置顶方法: recyclerView.scrollToPosition(15); 如果你需要让第15item在屏幕居中,只需 ...
Vue页面跳转后不显示问题
Vue页面跳转后不显示问题必须要添加 path前面要有/
vue页面跳转数据传递
vue页面跳转数据传递方法一: 第一页跳转赋值: toParameter:function(row) { this.$router.push({ path:'cardParameter', ...
vue锚链接可以从指定位置显示么_onenote链接系列⑥：链接笔记如何产生？与插入链接的区别...
上一篇中,已经详细介绍了链接笔记的定义.本文对链接笔记的相关注意事项进行进一步总结,并分析链接笔记与普通的插入链接的区别. 1 几点注意事项一.停靠状态下,手动键入和复制粘贴,两种方式形成的链接笔记 ...

Vue 页面跳转到指定位置

Vue 页面跳转到指定位置

页面跳转

页面

script

style

进阶版：随着页面滚动变换导航菜单样式

监听页面滚动方法

销毁滚动

Vue 页面跳转到指定位置相关推荐

最新文章

热门文章