vue+element ui实现页面平滑滚动，滚动监听（导航栏根据内容块滑动改变状态）

一、效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GU6sRH35-1655703819653)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/604927f19620433185e86d4bde706974~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image)]

二、点击导航栏页面平滑滚动

1.首先在子组件设置锚点

如图中给与导航栏对应的四个div设置锚点id 2.在子组件编写滚动方法 监听路由的变化 实现fetchData函数

可以看到，该方法获取了路由中通过query传递的参数aId，该参数是从父组件中所写的导航栏元素中传过来的，后面会看到。aId参数与锚点id一一对应，获取到该值后便使用scrollIntoView方法控制滚动。

3.在父组件中实现点击导航栏对象传递query参数

              
	              
	                  
		 增删改服务器                  
		备份                  
		恢复                  
		终止计划             
 	            
  

是对element ui的菜单组件进行了修改，点击导航栏中下选项就会通过路由query传递aId值

4 存在的问题解决 1）以上虽然在单个子组件页面内可以实现很好的平滑滚动，但是当切换到另外一个子组件页面时，页面停留在与上一个子组件页面相同的位置。 为解决这个问题，我们在父组件添加方法，当路由中的name有所改变时（即更换到了另一个子组件页面），我们便使屏幕滚动到顶部。

2）还有一个问题就是设置导航栏中默认激活项 解决方法： 我们在el-menu中设置：default-active和@open如下 js部分实现监听路由变化，改变导航栏选中状态 在methods中实现相应的方法

可以看到在fetchData中，用index存放当前路由的name，然后select赋值为存放在本地内存中的id（原来路由的name值），若原来的name不是空值，则判断二者是否相等，若不相等则证明从一个子组件页面跳转到了另一个子组件页面，所以我们将页面刷新定位到顶部。并将新的路由中的name，替换原name存放与缓存中的id中。——解决问题1

每当监听到路由发生改变，将新的route.query.id赋值给defaultAc，以改变激活项。 同时toOpen方法，使得点击导航的title部分时便更换route——解决问题2

三、滚动监听

1.在父组件中监听滚动条，并将当前位置传递给子组件，子组件将判断后的结果值，通过调用父组件方法改变导航栏激活选项

由于滚动条是属于父组件的，所以在父组件中监听，下方是父组件中引入子组件的入口

实现getScroll方法 <1>父组件调用子组件方法 在调用子组件的入口处添加 ref，如本例中，加上了ref=‘child’，然后需要调用的地方，用this.$refs.child.methods （其中methods是子组件的方法名）

<2>子组件调用父组件方法 本例中，先在调用子组件的入口绑定方法@func=“isActived”，其中isActived是父组件的方法

本例中，该方法如上，是为了实现，子组件页面滚动到相应位置后，对父组件的导航栏激活项进行改变

2.子组件页面对父组件传过来的页面scrollTop与锚点位置比对，以判断应当激活的导航栏选项

• 其中onScroll方法通过参数currentScrollTop接受到父组件传过来的当前元素的位置。
• 为每一个锚点块增加相同的class="anchor’"属性，然后通过document.querySelectAll(‘.anchor’),获取到所有锚点块元素对象，并将他们的scrollTop存放在数组中，然后通过循环对比当前位置与相关锚点位置的关系，从而调用父组件的方法改变menu组件的default-active属性值，从而改变激活状态。
• 由于最后一个锚点内容可能比较短，因而无法滚动到标题处，所以通过父组件中监听滚动条是否到达了底部，若到达了底部则调用子组件的toBottom方法