CN109508438A - 基于vue滚动事件的动态锚点的实现方法 - Google Patents

Abstract

本发明属于web网页技术领域，其公开了一种基于vue滚动事件的动态锚点的实现方法，通过对滚动事件的监听，在vue中利用动态锚点实现页面的平滑跳转。该方法包括：在vue表单的父组件中增加类名作为钩子，在其子组件中设置函数，通过将offset的值赋给Scroll，实现锚点的功能；当用户点击锚点的时候，通过offsetTop和scrollTop的比较确定所需滑动的方向和距离大小；将要滑动的距离进行分段，并通过window的计时器功能来设置每一段的距离的移动；在创建vue实例的时候，在vue生命周期中mounted阶段设置scroll函数，当用户滑动滚动条的时候，触发scroll函数计算滚动条移动的距离，通过对比从而确认此时对应激活的锚点，完成对于锚点css样式的修改。

Description

基于vue滚动事件的动态锚点的实现方法

技术领域

本发明属于web网页技术领域，具体涉及一种基于vue滚动事件的动态锚点的实现方法。

背景技术

随着互联网技术的普及，网站的浏览已经成为了用户生活当中必不可少的一部分，然而网站内容的多样性可能对用户的浏览造成困扰，而动态锚点的实现则可以让用户快速查找到自己所需的网页部分，对网站的结构有清晰的认识。vue框架作为当下热门的前端开发框架，采用自底向上增量开发的设计，开发过程当中只关注视图层，而且便于与第三方库或既有项目整合，当与现代化的工具链以结及各种支持类库合使用时，Vue也完全能够为复杂的单页应用提供驱动。这些都使得vue框架相对于react、angular等框架显得更加轻量、简洁、高效而且易于上手。

目前在网站开发中锚点的实现，主要是获取跳转部分的id或者class再通过html中链接直接完成跳转或者是利用jquery来实现跳转，使用的方式比较传统；而在最新的vue框架中，jquery的animate()方法的不支持和对滚动事件的监听的独特方式都导致了这些方式并不适合，因此本申请主要就是针对vue框架，通过对vue滚动事件的监听，完成动态锚点的实现。

发明内容

本发明所要解决的技术问题是：提出一种基于vue滚动事件的动态锚点的实现方法，通过对滚动事件的监听，在vue中利用动态锚点实现页面的平滑跳转。

本发明解决上述技术问题所采用的技术方案是：

基于vue滚动事件的动态锚点的实现方法，包括：

锚点的实现和平滑跳转：在vue表单的父组件中增加类名作为钩子，在其子组件中设置函数，通过将offset的值赋给Scroll，实现锚点的功能；当用户点击锚点的时候，通过offsetTop和scrollTop的比较确定所需滑动的方向和距离大小；将要滑动的距离进行分段，并通过window的计时器功能来设置每一段的距离的移动；

动态锚点的状态更改：在创建vue实例的时候，在vue生命周期中mounted阶段设置scroll函数，当用户滑动滚动条的时候，触发scroll函数计算滚动条移动的距离，通过对比从而确认此时对应激活的锚点，完成对于锚点css样式的修改。

作为进一步优化，所述通过offsetTop和scrollTop的比较确定所需滑动的方向和距离大小，将要滑动的距离进行分段，并通过window的计时器功能来设置每一段的距离的移动，具体包括：

在元素子组件中通过函数计算得到此时scroll和offset的值，计算两者的差值；若差值为正，将该差值除以设计所要移动的次数，用scroll的值减去所得到的数字，将浏览器的计时器设置合适的时间，依次完成所有的次数，实现向上滑动；若差值为负，则将该差值除以设计所要移动次数获取的值加上scroll的值，在计时器下依次完成每一段移动，实现向下滑动。

本发明的有益效果是：

可以让用户在浏览网页时快速跳转到所需部分，减少操作时间。同时用户在拖动滚动条时能够实时分辨出所浏览的内容，提高了用户的操作体验，实现网站布局的整体优化，而且通过锚点完成网页设计便于后期对网站内容的分模块维护、管理。

附图说明

图1为锚点的实现和平滑跳转的实现流程图；

图2为锚点状态的实时改变流程图。

具体实施方式

本发明旨在提出一种基于vue滚动事件的动态锚点的实现方法，通过对滚动事件的监听，在vue中利用动态锚点实现页面的平滑跳转。在本发明中，当用户在点击锚点时候，通过对滚动事件的监听，将网页跳转到相对应的部分，而当用户拖动滚动条到不同的位置，其对应的锚点的状态也将发生改变，从而便于用户对于网页的认知、浏览。

实现本发明方案需要解决的问题包括：一是如何实现对滚动事件的监听；二是在vue中如何实现页面的平滑跳转。

解决的途径为：一、在vue的mounted的生命周期完成监听。二是通过将跳转的距离分成小块，使用window计时器来分步完成跳转，从而在视觉上实现平滑跳转的效果。

在具体实现上，基于vue滚动事件的动态锚点的实现方法包括以下部分：

监听滚动事件：

用户在拖动滚动条的时候将会触发滚动事件，而在vue中我们将在生命周期中来完成监听：每个Vue实例在被创建时都要经过一系列的初始化过程(例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等)，Mounted作为生命周期中的一个状态此时各个模块已经创建但数据尚未加载，我们可以在此期间函数完成对滚动事件的监听，触发我们事先设置好的函数。

锚点的实现与改变：

本发明主要是通过在vue表单中的父组件中增添类名来作为钩子，再获取到距离父元素顶端的值offsetTop的值，将其赋值给进度条scrollTop的值，完成滚动条的滑动，从而来实现页面的快速跳转；

通过对于滚动事件的监听，我们获取到此时相应锚点是否处于激活的状态，修改处于激活状态的锚点的属性值，从而实现锚点与滚动条内容之间的匹配。

锚点的平滑滚动：

通过对于scroll和ofset两者的数据的比较，计算两者之间的差值来确定元素将要滑动的距离，将这部分按照实际的需求在确保用户感受到平滑的滚动原则下将其划分为若干部分，再通过window的计时器来实现每一段的移动从而完成滚动。

实施例：

锚点的具体实现和平滑跳转：

通过element-ui插件在页面中插入进度条，在其父组件中增加类名，再在其子组件中设置函数，计算element中的距离父元素顶端的值offsetTop的值，将该值赋值给进度条scrollTop，实现锚点的功能；

当用户点击锚点的时候，在元素子组件中通过函数计算得到此时scroll和offset的值，计算两者的差值；若为正的话：将该差值除以设计所要移动的次数，用scroll的值减去所的到的数字，将浏览器的计时器设置合适的时间，依次完成所有的次数，实现向上滑动；若为负：将差除以移动次数获取的值加上scroll的值，在计时器下依次完成每一段移动，实现向下的滑动。锚点的具体实现和平滑跳转的流程参见图1。

锚点状态的改变：

在创建vue实例时候在生命周期中的mounted创建scroll函数，当用户在滑动滚动条的时候，触发函数计算出此时scrollTop的数值，将该数值与其他元素进行一一比较，然后将匹配到的锚点的css样式进行修改，锚点状态的改变流程参见图2。

Claims (2)

1.基于vue滚动事件的动态锚点的实现方法，其特征在于，包括：

锚点的实现和平滑跳转：在vue表单的父组件中增加类名作为钩子，在其子组件中设置函数，通过将offset的值赋给Scroll，实现锚点的功能；当用户点击锚点的时候，通过offsetTop和scrollTop的比较确定所需滑动的方向和距离大小；将要滑动的距离进行分段，并通过window的计时器功能来设置每一段的距离的移动；

动态锚点的状态更改：在创建vue实例的时候，在vue生命周期中mounted阶段设置scroll函数，当用户滑动滚动条的时候，触发scroll函数计算滚动条移动的距离，通过对比从而确认此时对应激活的锚点，完成对于锚点css样式的修改。

2.如权利要求1所述的基于vue滚动事件的动态锚点的实现方法，其特征在于，所述通过offsetTop和scrollTop的比较确定所需滑动的方向和距离大小，将要滑动的距离进行分段，并通过window的计时器功能来设置每一段的距离的移动，具体包括：

在元素子组件中通过函数计算得到此时scroll和offset的值，计算两者的差值；若差值为正，将该差值除以设计所要移动的次数，用scroll的值减去所得到的数字，将浏览器的计时器设置合适的时间，依次完成所有的次数，实现向上滑动；若差值为负，则将该差值除以设计所要移动次数获取的值加上scroll的值，在计时器下依次完成每一段移动，实现向下滑动。