一种基于Vue框架实现双向锚点定位方法及系统技术方案

本发明专利技术公开了一种基于Vue框架实现双向锚点定位方法及系统，其中，所述方法包括：在Vue生命周期中构建第一监听模块；通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域；若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置；根据所述实时页面滚动位置，获得第一相对位置；根据所述第一相对位置，构建第一页面滚动规则；按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域。解决了现有技术在Vue项目中，使用传统的锚点定位与vue

【技术实现步骤摘要】
一种基于Vue框架实现双向锚点定位方法及系统


[0001]本专利技术涉及锚点定位领域，尤其涉及一种基于Vue框架实现双向锚点定位方法及系统。

技术介绍

[0002]锚点是网页制作中超级链接的一种，像一个迅速定位器一样，用户可以通过这些链接快速到达页面的指定位置。锚点链接常用于内容庞大繁琐的网页，便于用户浏览网页内容，类似我们阅读书籍时的目录页码，在需要指定到页面的特定部分时，标记锚点是最佳的方法。
[0003]但本申请专利技术人在实现本申请实施例中专利技术技术方案的过程中，发现上述技术至少存在如下技术问题：
[0004]现有技术在Vue项目中，使用传统的锚点定位与vue
‑
router规则冲突，页面滚动效果过于生硬，不够平缓，用户体验不好，且不能反向标记锚点位置的技术问题。

技术实现思路

[0005]本申请实施例通过提供一种基于Vue框架实现双向锚点定位方法及系统，解决了现有技术在Vue项目中，使用传统的锚点定位与vue
‑
router规则冲突，页面滚动效果过于生硬，不够平缓，用户体验不好，且不能反向标记锚点位置的技术问题，达到解决了传统的锚点定位与vue
‑
router规则冲突，不局限于框架，实现锚点定位，并达到平滑滚动页面的效果，且可以反向标记页面锚点激活状态，在页面滚动过程中，实时监听浏览器可见区域，用户对于页面结构更加清晰，减少用户误操作的可能性的技术效果。
[0006]鉴于上述问题，提出了本专利技术以便提供一种克服上述问题或者至少部分地解决上述问题的方法。
[0007]第一方面，本申请实施例提供了一种基于Vue框架实现双向锚点定位方法，所述方法包括：在Vue生命周期中构建第一监听模块，其中，所述第一监听模块用于对第一监听页面的滚动位置数据进行监听；通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域；获得所述第一锚点链接的实时状态；判断所述第一锚点链接的实时状态是否处于激活状态；若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置；根据所述实时页面滚动位置，获得第一相对位置；根据所述第一相对位置，构建第一页面滚动规则；按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域。
[0008]另一方面，本申请还提供了一种基于Vue框架实现双向锚点定位系统，所述系统包括：第一构建单元，所述第一构建单元用于在Vue生命周期中构建第一监听模块，其中，所述第一监听模块用于对第一监听页面的滚动位置数据进行监听；第一确定单元，所述第一确定单元用于通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域；第一获得单元，所述第一获得单元用于获得所述第一锚点链接的实时状态；第一判断单
元，所述第一判断单元用于判断所述第一锚点链接的实时状态是否处于激活状态；第二获得单元，所述第二获得单元用于若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置；第三获得单元，所述第三获得单元用于根据所述实时页面滚动位置，获得第一相对位置；第二构建单元，所述第二构建单元用于根据所述第一相对位置，构建第一页面滚动规则；第一滚动单元，所述第一滚动单元用于按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域。
[0009]第三方面，本专利技术实施例提供了一种电子设备，包括总线、收发器、存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述收发器、所述存储器和所述处理器通过所述总线相连，所述计算机程序被所述处理器执行时实现上述任意一项所述的控制输出数据的方法中的步骤。
[0010]第四方面，本专利技术实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意一项所述的控制输出数据的方法中的步骤。
[0011]本申请实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：
[0012]由于采用了在Vue生命周期中构建第一监听模块，其中，所述第一监听模块用于对第一监听页面的滚动位置数据进行监听；通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域；若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置；根据所述实时页面滚动位置，获得第一相对位置；根据所述第一相对位置，构建第一页面滚动规则；按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域。进而达到解决了传统的锚点定位与vue
‑
router规则冲突，不局限于框架，实现锚点定位，并达到平滑滚动页面的效果，且可以反向标记页面锚点激活状态，在页面滚动过程中，实时监听浏览器可见区域，用户对于页面结构更加清晰，减少用户误操作的可能性的技术效果。
[0013]上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。
附图说明
[0014]图1为本申请实施例一种基于Vue框架实现双向锚点定位方法的流程示意图；
[0015]图2为本申请实施例一种基于Vue框架实现双向锚点定位方法中获得用户的实时页面滚动位置的流程示意图；
[0016]图3为本申请实施例一种基于Vue框架实现双向锚点定位方法中构建第一页面滚动方向的流程示意图；
[0017]图4为本申请实施例一种基于Vue框架实现双向锚点定位方法中构建第一页面滚动规则的流程示意图；
[0018]图5为本申请实施例一种基于Vue框架实现双向锚点定位方法中构建第二页面滚动规则的流程示意图；
[0019]图6为本申请实施例一种基于Vue框架实现双向锚点定位方法中对第一锚点进行设置的流程示意图；
[0020]图7为本申请实施例一种基于Vue框架实现双向锚点定位方法中对第一锚点区域进行标识的流程示意图；
[0021]图8为本申请实施例一种基于Vue框架实现双向锚点定位系统的结构示意图；
[0022]图9为本申请实施例所提供的一种用于执行控制输出数据的方法的电子设备的结构示意图。
[0023]附图标记说明：第一构建单元11，第一确定单元12，第一获得单元13，第一判断单元14，第二获得单元15，第三获得单元16，第二构建单元17，第一滚动单元18，总线1110，处理器1120，收发器1130，总线接口1140，存储器1150，操作系统1151，应用程序1152和用户接口1160。
具体实施方式
[0024]在本专利技术实施例的描述中，所属
的技术人员应当知道，本专利技术实施例可以实现为方法、装置、电子设备及计算机可读存储介质。因此，本专利技术实施例可以具体实现为以下形式：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)、硬件和软件结合的形式。此外，在一些实施例中，本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于Vue框架实现双向锚点定位方法，其中，所述方法包括：在Vue生命周期中构建第一监听模块，其中，所述第一监听模块用于对第一监听页面的滚动位置数据进行监听；通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域；获得所述第一锚点链接的实时状态；判断所述第一锚点链接的实时状态是否处于激活状态；若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置；根据所述实时页面滚动位置，获得第一相对位置；根据所述第一相对位置，构建第一页面滚动规则；按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域。2.如权利要求1所述的方法，其中，若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置，所述方法还包括：当所述实时页面滚动位置处于所述第一锚点区域中，获得第一标记指令；根据所述第一标记指令对所述第一锚点进行状态标记，获得初始状态；当所述第一用户点击所述第一锚点时，获得第一变更指令；根据所述第一变更指令，将所述第一锚点的所述初始状态变更为激活状态。3.如权利要求1所述的方法，其中，所述根据所述第一相对位置，构建第一页面滚动规则，所述方法还包括：根据所述第一锚点区域和所述实时页面滚动位置，获得所述第一相对位置，其中，所述第一相对位置为所述第一锚点区域与所述实时页面滚动位置的相对位置；根据所述第一相对位置，确定页面滚动方向，其中，所述页面滚动方向包括向上滚动和向下滚动；根据所述页面滚动方向，构建所述第一页面滚动规则。4.如权利要求3所述的方法，所述根据所述页面滚动方向，构建所述第一页面滚动规则，所述方法还包括：根据所述第一相对位置，获得第一页面滚动距离；通过对所述第一页面滚动距离进行划分，获得页面子距离集合；基于所述页面子距离集合，生成第一滚动时间集合，其中，所述页面子距离集合与所述第一滚动时间集合对应；根据所述第一滚动时间集合和所述页面滚动方向，构建所述第一页面滚动规则。5.如权利要求1所述的方法，其中，所述按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域，所述方法还包括：根据所述第一监听模块，获得页面平滑滚动数据；将所述页面平滑滚动数据输入平滑度分析模型中进行分析，获得第一平滑度；判断所述第一平滑度是否处于预设平滑度阈值中；若所述第一平滑度不处于所述预设平滑度阈值中，构建第二页面滚动规...

【专利技术属性】
技术研发人员：陈明佳，段海波，
申请(专利权)人：北京荣达天下信息科技有限公司，
类型：发明
国别省市：