CN114186159A - 一种基于Vue框架实现双向锚点定位方法及系统 - Google Patents

Abstract

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

Description

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

技术领域

本发明涉及锚点定位领域，尤其涉及一种基于Vue框架实现双向锚点定位方法及系统。

背景技术

锚点是网页制作中超级链接的一种，像一个迅速定位器一样，用户可以通过这些链接快速到达页面的指定位置。锚点链接常用于内容庞大繁琐的网页，便于用户浏览网页内容，类似我们阅读书籍时的目录页码，在需要指定到页面的特定部分时，标记锚点是最佳的方法。

但本申请发明人在实现本申请实施例中发明技术方案的过程中，发现上述技术至少存在如下技术问题：

现有技术在Vue项目中，使用传统的锚点定位与vue-router规则冲突，页面滚动效果过于生硬，不够平缓，用户体验不好，且不能反向标记锚点位置的技术问题。

发明内容

本申请实施例通过提供一种基于Vue框架实现双向锚点定位方法及系统，解决了现有技术在Vue项目中，使用传统的锚点定位与vue-router规则冲突，页面滚动效果过于生硬，不够平缓，用户体验不好，且不能反向标记锚点位置的技术问题，达到解决了传统的锚点定位与vue-router规则冲突，不局限于框架，实现锚点定位，并达到平滑滚动页面的效果，且可以反向标记页面锚点激活状态，在页面滚动过程中，实时监听浏览器可见区域，用户对于页面结构更加清晰，减少用户误操作的可能性的技术效果。

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的方法。

第一方面，本申请实施例提供了一种基于Vue框架实现双向锚点定位方法，所述方法包括：在Vue生命周期中构建第一监听模块，其中，所述第一监听模块用于对第一监听页面的滚动位置数据进行监听；通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域；获得所述第一锚点链接的实时状态；判断所述第一锚点链接的实时状态是否处于激活状态；若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置；根据所述实时页面滚动位置，获得第一相对位置；根据所述第一相对位置，构建第一页面滚动规则；按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域。

另一方面，本申请还提供了一种基于Vue框架实现双向锚点定位系统，所述系统包括：第一构建单元，所述第一构建单元用于在Vue生命周期中构建第一监听模块，其中，所述第一监听模块用于对第一监听页面的滚动位置数据进行监听；第一确定单元，所述第一确定单元用于通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域；第一获得单元，所述第一获得单元用于获得所述第一锚点链接的实时状态；第一判断单元，所述第一判断单元用于判断所述第一锚点链接的实时状态是否处于激活状态；第二获得单元，所述第二获得单元用于若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置；第三获得单元，所述第三获得单元用于根据所述实时页面滚动位置，获得第一相对位置；第二构建单元，所述第二构建单元用于根据所述第一相对位置，构建第一页面滚动规则；第一滚动单元，所述第一滚动单元用于按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域。

第三方面，本发明实施例提供了一种电子设备，包括总线、收发器、存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述收发器、所述存储器和所述处理器通过所述总线相连，所述计算机程序被所述处理器执行时实现上述任意一项所述的控制输出数据的方法中的步骤。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意一项所述的控制输出数据的方法中的步骤。

本申请实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：

由于采用了在Vue生命周期中构建第一监听模块，其中，所述第一监听模块用于对第一监听页面的滚动位置数据进行监听；通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域；若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置；根据所述实时页面滚动位置，获得第一相对位置；根据所述第一相对位置，构建第一页面滚动规则；按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域。进而达到解决了传统的锚点定位与vue-router规则冲突，不局限于框架，实现锚点定位，并达到平滑滚动页面的效果，且可以反向标记页面锚点激活状态，在页面滚动过程中，实时监听浏览器可见区域，用户对于页面结构更加清晰，减少用户误操作的可能性的技术效果。

上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。

附图说明

图1为本申请实施例一种基于Vue框架实现双向锚点定位方法的流程示意图；

图2为本申请实施例一种基于Vue框架实现双向锚点定位方法中获得用户的实时页面滚动位置的流程示意图；

图3为本申请实施例一种基于Vue框架实现双向锚点定位方法中构建第一页面滚动方向的流程示意图；

图4为本申请实施例一种基于Vue框架实现双向锚点定位方法中构建第一页面滚动规则的流程示意图；

图5为本申请实施例一种基于Vue框架实现双向锚点定位方法中构建第二页面滚动规则的流程示意图；

图6为本申请实施例一种基于Vue框架实现双向锚点定位方法中对第一锚点进行设置的流程示意图；

图7为本申请实施例一种基于Vue框架实现双向锚点定位方法中对第一锚点区域进行标识的流程示意图；

图8为本申请实施例一种基于Vue框架实现双向锚点定位系统的结构示意图；

图9为本申请实施例所提供的一种用于执行控制输出数据的方法的电子设备的结构示意图。

附图标记说明：第一构建单元11，第一确定单元12，第一获得单元13，第一判断单元14，第二获得单元15，第三获得单元16，第二构建单元17，第一滚动单元18，总线1110，处理器1120，收发器1130，总线接口1140，存储器1150，操作系统1151，应用程序1152和用户接口1160。

具体实施方式

在本发明实施例的描述中，所属技术领域的技术人员应当知道，本发明实施例可以实现为方法、装置、电子设备及计算机可读存储介质。因此，本发明实施例可以具体实现为以下形式：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)、硬件和软件结合的形式。此外，在一些实施例中，本发明实施例还可以实现为在一个或多个计算机可读存储介质中的计算机程序产品的形式，该计算机可读存储介质中包含计算机程序代码。

上述计算机可读存储介质可以采用一个或多个计算机可读存储介质的任意组合。计算机可读存储介质包括：电、磁、光、电磁、红外或半导体的系统、装置或器件，或者以上任意的组合。计算机可读存储介质更具体的例子包括：便携式计算机磁盘、硬盘、随机存取存储器、只读存储器、可擦除可编程只读存储器、闪存、光纤、光盘只读存储器、光存储器件、磁存储器件或以上任意组合。在本发明实施例中，计算机可读存储介质可以是任意包含或存储程序的有形介质，该程序可以被指令执行系统、装置、器件使用或与其结合使用。

申请概述

本发明实施例通过流程图和/或方框图描述所提供的方法、装置、电子设备。

应当理解，流程图和/或方框图的每个方框以及流程图和/或方框图中各方框的组合，都可以由计算机可读程序指令实现。这些计算机可读程序指令可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器，从而生产出一种机器，这些计算机可读程序指令通过计算机或其他可编程数据处理装置执行，产生了实现流程图和/或方框图中的方框规定的功能/操作的装置。

也可以将这些计算机可读程序指令存储在能使得计算机或其他可编程数据处理装置以特定方式工作的计算机可读存储介质中。这样，存储在计算机可读存储介质中的指令就产生出一个包括实现流程图和/或方框图中的方框规定的功能/操作的指令装置产品。

也可以将计算机可读程序指令加载到计算机、其他可编程数据处理装置或其他设备上，使得在计算机、其他可编程数据处理装置或其他设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机或其他可编程数据处理装置上执行的指令能够提供实现流程图和/或方框图中的方框规定的功能/操作的过程。

下面结合本发明实施例中的附图对本发明实施例进行描述。

实施例一

如图1所示，本申请实施例提供了一种基于Vue框架实现双向锚点定位方法，其中，所述方法包括：

步骤S100：在Vue生命周期中构建第一监听模块，其中，所述第一监听模块用于对第一监听页面的滚动位置数据进行监听；

步骤S200：通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域；

具体而言，Vue生命周期，又叫生命周期钩子函数，是组件从创建到销毁的过程，Vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在Vue生命周期中构建第一监听模块，所述第一监听模块用于对第一监听页面的滚动位置数据进行监听，即在Vue生命周期中的mounted监听页面滚动事件。计算并设置每一锚点指定区域的初始位置和结束位置，确定第一锚点区域，实时监听页面滚动位置。

步骤S300：获得所述第一锚点链接的实时状态；

步骤S400：判断所述第一锚点链接的实时状态是否处于激活状态；

具体而言，实时监听页面滚动位置，获得所述第一锚点链接的实时状态，锚点链接能精确的描述所指向页面的内容，判断所述第一锚点链接的实时状态是否处于激活状态，当锚点链接获得焦点，并且由此被激活，就处于激活状态。

步骤S500：若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置；

如图2所示，进一步而言，其中，所述若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置，本申请实施例步骤S500还包括：

步骤S510：当所述实时页面滚动位置处于所述第一锚点区域中，获得第一标记指令；

步骤S520：根据所述第一标记指令对所述第一锚点进行状态标记，获得初始状态；

步骤S530：当所述第一用户点击所述第一锚点时，获得第一变更指令；

步骤S540：根据所述第一变更指令，将所述第一锚点的所述初始状态变更为激活状态。

具体而言，当所述实时页面滚动位置处于所述第一锚点区域中，根据所述第一标记指令对所述第一锚点进行初始状态标记，当所述第一用户点击所述第一锚点时，将所述第一锚点的所述初始状态变更为激活状态，即锚点链接获得焦点，并由此被激活处于激活状态。若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，监听所述第一用户的实时页面滚动位置。达到可以反向标记页面锚点激活状态，在页面滚动过程中，实时监听浏览器可见区域，用户对于页面结构更加清晰的技术效果。

步骤S600：根据所述实时页面滚动位置，获得第一相对位置；

具体而言，根据所述第一监听模块监听获得的所述实时页面滚动位置，和所述第一锚点区域获得第一相对位置，所述第一相对位置是指定锚点区域相对于当前页面的位置，以构建后续页面滚动规则。

步骤S700：根据所述第一相对位置，构建第一页面滚动规则；

如图3所示，进一步而言，其中，所述根据所述第一相对位置，构建第一页面滚动规则，本申请实施例步骤S700还包括：

步骤S710：根据所述第一锚点区域和所述实时页面滚动位置，获得所述第一相对位置，其中，所述第一相对位置为所述第一锚点区域与所述实时页面滚动位置的相对位置；

步骤S720：根据所述第一相对位置，确定页面滚动方向，其中，所述页面滚动方向包括向上滚动和向下滚动；

步骤S730：根据所述页面滚动方向，构建所述第一页面滚动规则。

具体而言，根据所述第一锚点区域和所述实时页面滚动位置，获得所述第一相对位置，所述第一相对位置为所述第一锚点区域与所述实时页面滚动位置的相对位置。根据所述第一相对位置，确定页面滚动方向，所述页面滚动方向包括页面向上滚动和页面向下滚动两种情况，根据所述页面滚动方向，构建所述第一页面滚动规则。实现锚点定位效果，使得页面结构更加清晰，减少用户误操作的可能性，提升用户体验感的技术效果。

步骤S800：按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域。

如图5所示，进一步而言，其中，所述按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域，本申请实施例步骤S800还包括：

步骤S810：根据所述第一监听模块，获得页面平滑滚动数据；

步骤S820：将所述页面平滑滚动数据输入平滑度分析模型中进行分析，获得第一平滑度；

步骤S830：判断所述第一平滑度是否处于预设平滑度阈值中；

步骤S840：若所述第一平滑度不处于所述预设平滑度阈值中，构建第二页面滚动规则。

具体而言，根据所述第一监听模块，监听获得页面平滑滚动数据，将所述页面平滑滚动数据输入平滑度分析模型中进行分析，所述平滑度分析模型为神经网络模型，获得所述模型输出的第一平滑度，使得页面平滑度分析更加准确。判断所述第一平滑度是否处于预设平滑度阈值中，所述预设平滑度阈值为预先设定的平滑度范围大小。若所述第一平滑度不处于所述预设平滑度阈值中，即未达到预定平滑度阈值，在视觉上达不到平滑滚动的效果，可对所述第一页面滚动规则进行修正，构建第二页面滚动规则，所述第二页面滚动规则用于使得页面平滑度处于预设平滑度阈值内，以保证达到平滑滚动页面的效果。

如图4所示，进一步而言，其中，所述根据所述页面滚动方向，构建所述第一页面滚动规则，本申请实施例步骤S730还包括：

步骤S731：根据所述第一相对位置，获得第一页面滚动距离；

步骤S732：通过对所述第一页面滚动距离进行划分，获得页面子距离集合；

步骤S733：基于所述页面子距离集合，生成第一滚动时间集合，其中，所述页面子距离集合与所述第一滚动时间集合对应；

步骤S734：根据所述第一滚动时间集合和所述页面滚动方向，构建所述第一页面滚动规则。

具体而言，根据所述第一相对位置，获得第一页面滚动距离，通过对所述第一页面滚动距离进行划分，将页面滚动距离分成若干小段，获得页面子距离集合。基于所述页面子距离集合，生成第一滚动时间集合，所述页面子距离集合与所述第一滚动时间集合对应。根据所述第一滚动时间集合和所述页面滚动方向，构建所述第一页面滚动规则，即设定间隔一段时间滚动一段距离，保证在视觉上达到页面平滑滚动的效果。

如图6所示，进一步而言，其中，所述通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域之前，本申请实施例步骤S200还包括：

步骤S210：所述第一锚点包括第一锚点组件；

步骤S220：获得所述第一锚点的多属性信息，其中，所述多属性信息包括锚点数据的文案、锚点的唯一标识、锚点的位置、激活状态的色值；

步骤S230：将所述多属性信息输入所述第一锚点组件中；

步骤S240：根据所述第一锚点组件对所述第一锚点进行设置。

具体而言，在确定第一锚点区域之前，对所述第一锚点进行设置，所述第一锚点包括第一锚点组件，在项目中引用锚点组件，锚点组件可以将页面滚动到这个数据分析或者组件的位置。对锚点组件传入特定属性，所述第一锚点的多属性信息包括锚点数据的文案、锚点的唯一标识、锚点的位置、激活状态的色值。将所述多属性信息输入所述第一锚点组件中，根据所述第一锚点组件对所述第一锚点进行设置，实现Vue双向锚点定位，不局限于框架，使得页面结构更加清晰，减少用户误操作的可能性的技术效果。

如图7所示，进一步而言，本申请实施例步骤S240还包括：

步骤S241：根据所述多属性信息，获得所述第一锚点的唯一标识；

步骤S242：判断所述第一锚点区域的唯一标识是否与所述第一锚点的唯一标识相同；

步骤S243：当所述第一锚点区域的唯一标识与所述第一锚点的唯一标识不相同，获得第二变更指令；

步骤S244：根据所述第二变更指令，根据所述第一锚点的唯一标识对所述第一锚点区域进行标识。

具体而言，根据所述第一锚点的多属性信息，获得所述第一锚点的唯一标识，锚点对应指定区域需要设置唯一标识，需跟锚点的唯一标识保持一致。判断所述第一锚点区域的唯一标识是否与所述第一锚点的唯一标识相同，当所述第一锚点区域的唯一标识与所述第一锚点的唯一标识不相同，需要对所述第一锚点区域进行标识变更。根据所述第一锚点的唯一标识对所述第一锚点区域进行标识，确保锚点区域的唯一标识和锚点的唯一标识保持一致的技术效果。

综上所述，本申请实施例所提供的一种基于Vue框架实现双向锚点定位方法及系统具有如下技术效果：

由于采用了在Vue生命周期中构建第一监听模块，其中，所述第一监听模块用于对第一监听页面的滚动位置数据进行监听；通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域；若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置；根据所述实时页面滚动位置，获得第一相对位置；根据所述第一相对位置，构建第一页面滚动规则；按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域。进而达到解决了传统的锚点定位与vue-router规则冲突，不局限于框架，实现锚点定位，并达到平滑滚动页面的效果，且可以反向标记页面锚点激活状态，在页面滚动过程中，实时监听浏览器可见区域，用户对于页面结构更加清晰，减少用户误操作的可能性的技术效果。

实施例二

基于与前述实施例中一种基于Vue框架实现双向锚点定位方法同样发明构思，本发明还提供了一种基于Vue框架实现双向锚点定位系统，如图8所示，所述系统包括：

第一构建单元11，所述第一构建单元11用于在Vue生命周期中构建第一监听模块，其中，所述第一监听模块用于对第一监听页面的滚动位置数据进行监听；

第一确定单元12，所述第一确定单元12用于通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域；

第一获得单元13，所述第一获得单元13用于获得所述第一锚点链接的实时状态；

第一判断单元14，所述第一判断单元14用于判断所述第一锚点链接的实时状态是否处于激活状态；

第二获得单元15，所述第二获得单元15用于若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置；

第三获得单元16，所述第三获得单元16用于根据所述实时页面滚动位置，获得第一相对位置；

第二构建单元17，所述第二构建单元17用于根据所述第一相对位置，构建第一页面滚动规则；

第一滚动单元18，所述第一滚动单元18用于按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域。

进一步的，所述系统还包括：

第四获得单元，所述第四获得单元用于当所述实时页面滚动位置处于所述第一锚点区域中，获得第一标记指令；

第五获得单元，所述第五获得单元用于根据所述第一标记指令对所述第一锚点进行状态标记，获得初始状态；

第六获得单元，所述第六获得单元用于当所述第一用户点击所述第一锚点时，获得第一变更指令；

第一变更单元，所述第一变更单元用于根据所述第一变更指令，将所述第一锚点的所述初始状态变更为激活状态。

进一步的，所述系统还包括：

第七获得单元，所述第七获得单元用于根据所述第一锚点区域和所述实时页面滚动位置，获得所述第一相对位置，其中，所述第一相对位置为所述第一锚点区域与所述实时页面滚动位置的相对位置；

第二确定单元，所述第二确定单元用于根据所述第一相对位置，确定页面滚动方向，其中，所述页面滚动方向包括向上滚动和向下滚动；

第三构建单元，所述第三构建单元用于根据所述页面滚动方向，构建所述第一页面滚动规则。

进一步的，所述系统还包括：

第八获得单元，所述第八获得单元用于根据所述第一相对位置，获得第一页面滚动距离；

第九获得单元，所述第九获得单元用于通过对所述第一页面滚动距离进行划分，获得页面子距离集合；

第一生成单元，所述第一生成单元用于基于所述页面子距离集合，生成第一滚动时间集合，其中，所述页面子距离集合与所述第一滚动时间集合对应；

第四构建单元，所述第四构建单元用于根据所述第一滚动时间集合和所述页面滚动方向，构建所述第一页面滚动规则。

进一步的，所述系统还包括：

第十获得单元，所述第十获得单元用于根据所述第一监听模块，获得页面平滑滚动数据；

第十一获得单元，所述第十一获得单元用于将所述页面平滑滚动数据输入平滑度分析模型中进行分析，获得第一平滑度；

第二判断单元，所述第二判断单元用于判断所述第一平滑度是否处于预设平滑度阈值中；

第五构建单元，所述第五构建单元用于若所述第一平滑度不处于所述预设平滑度阈值中，构建第二页面滚动规则。

进一步的，所述系统还包括：

第十二获得单元，所述第十二获得单元用于获得所述第一锚点的多属性信息，其中，所述多属性信息包括锚点数据的文案、锚点的唯一标识、锚点的位置、激活状态的色值；

第一输入单元，所述第一输入单元用于将所述多属性信息输入所述第一锚点组件中；

第一设置单元，所述第一设置单元用于根据所述第一锚点组件对所述第一锚点进行设置。

进一步的，所述系统还包括：

第十三获得单元，所述第十三获得单元用于根据所述多属性信息，获得所述第一锚点的唯一标识；

第三判断单元，所述第三判断单元用于判断所述第一锚点区域的唯一标识是否与所述第一锚点的唯一标识相同；

第十四获得单元，所述第十四获得单元用于当所述第一锚点区域的唯一标识与所述第一锚点的唯一标识不相同，获得第二变更指令；

第一标识单元，所述第一标识单元用于根据所述第二变更指令，根据所述第一锚点的唯一标识对所述第一锚点区域进行标识。

前述图1实施例一中的一种基于Vue框架实现双向锚点定位方法的各种变化方式和具体实例同样适用于本实施例的一种基于Vue框架实现双向锚点定位系统，通过前述对一种基于Vue框架实现双向锚点定位方法的详细描述，本领域技术人员可以清楚的知道本实施例中一种基于Vue框架实现双向锚点定位系统的实施方法，所以为了说明书的简洁，在此不再详述。

此外，本发明实施例还提供了一种电子设备，包括总线、收发器、存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，该收发器、该存储器和处理器分别通过总线相连，计算机程序被处理器执行时实现上述控制输出数据的方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

示例性电子设备

具体的，参见图9所示，本发明实施例还提供了一种电子设备，该电子设备包括总线1110、处理器1120、收发器1130、总线接口1140、存储器1150和用户接口1160。

在本发明实施例中，该电子设备还包括：存储在存储器1150上并可在处理器1120上运行的计算机程序，计算机程序被处理器1120执行时实现上述控制输出数据的方法实施例的各个过程。

收发器1130，用于在处理器1120的控制下接收和发送数据。

本发明实施例中，总线架构(用总线1110来代表)，总线1110可以包括任意数量互联的总线和桥，总线1110将包括由处理器1120代表的一个或多个处理器与存储器1150代表的存储器的各种电路连接在一起。

总线1110表示若干类型的总线结构中的任何一种总线结构中的一个或多个，包括存储器总线和存储器控制器、外围总线、加速图形端口、处理器或使用各种总线体系结构中的任意总线结构的局域总线。作为示例而非限制，这样的体系结构包括：工业标准体系结构总线、微通道体系结构总线、扩展总线、视频电子标准协会、外围部件互连总线。

处理器1120可以是一种集成电路芯片，具有信号处理能力。在实现过程中，上述方法实施例的各步骤可以通过处理器中硬件的集成逻辑电路或软件形式的指令完成。上述的处理器包括：通用处理器、中央处理器、网络处理器、数字信号处理器、专用集成电路、现场可编程门阵列、复杂可编程逻辑器件、可编程逻辑阵列、微控制单元或其他可编程逻辑器件、分立门、晶体管逻辑器件、分立硬件组件。可以实现或执行本发明实施例中公开的各方法、步骤和逻辑框图。例如，处理器可以是单核处理器或多核处理器，处理器可以集成于单颗芯片或位于多颗不同的芯片。

处理器1120可以是微处理器或任何常规的处理器。结合本发明实施例所公开的方法步骤可以直接由硬件译码处理器执行完成，或者由译码处理器中的硬件和软件模块组合执行完成。软件模块可以位于随机存取存储器、闪存、只读存储器、可编程只读存储器、可擦除可编程只读存储器、寄存器等本领域公知的可读存储介质中。所述可读存储介质位于存储器中，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。

总线1110还可以将，例如外围设备、稳压器或功率管理电路等各种其他电路连接在一起，总线接口1140在总线1110和收发器1130之间提供接口，这些都是本领域所公知的。因此，本发明实施例不再对其进行进一步描述。

收发器1130可以是一个元件，也可以是多个元件，例如多个接收器和发送器，提供用于在传输介质上与各种其他装置通信的单元。例如：收发器1130从其他设备接收外部数据，收发器1130用于将处理器1120处理后的数据发送给其他设备。取决于计算机装置的性质，还可以提供用户接口1160，例如：触摸屏、物理键盘、显示器、鼠标、扬声器、麦克风、轨迹球、操纵杆、触控笔。

应理解，在本发明实施例中，存储器1150可进一步包括相对于处理器1120远程设置的存储器，这些远程设置的存储器可以通过网络连接至服务器。上述网络的一个或多个部分可以是自组织网络、内联网、外联网、虚拟专用网、局域网、无线局域网、广域网、无线广域网、城域网、互联网、公共交换电话网、普通老式电话业务网、蜂窝电话网、无线网络、无线保真网络以和两个或更多个上述网络的组合。例如，蜂窝电话网和无线网络可以是全球移动通信装置、码分多址装置、全球微波互联接入装置、通用分组无线业务装置、宽带码分多址装置、长期演进装置、LTE频分双工装置、LTE时分双工装置、先进长期演进装置、通用移动通信装置、增强移动宽带装置、海量机器类通信装置、超可靠低时延通信装置等。

应理解，本发明实施例中的存储器1150可以是易失性存储器或非易失性存储器，或可包括易失性存储器和非易失性存储器两者。其中，非易失性存储器包括：只读存储器、可编程只读存储器、可擦除可编程只读存储器、电可擦除可编程只读存储器，或闪存。

易失性存储器包括：随机存取存储器，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的RAM可用，例如：静态随机存取存储器、动态随机存取存储器、同步动态随机存取存储器、双倍数据速率同步动态随机存取存储器、增强型同步动态随机存取存储器、同步连接动态随机存取存储器和直接内存总线随机存取存储器。本发明实施例描述的电子设备的存储器1150包括但不限于上述和任意其他适合类型的存储器。

在本发明实施例中，存储器1150存储了操作系统1151和应用程序1152的如下元素：可执行模块、数据结构，或者其子集，或者其扩展集。

具体而言，操作系统1151包含各种装置程序，例如：框架层、核心库层、驱动层等，用于实现各种基础业务和处理基于硬件的任务。应用程序1152包含各种应用程序，例如：媒体播放器、浏览器，用于实现各种应用业务。实现本发明实施例方法的程序可以包含在应用程序1152中。应用程序1152包括：小程序、对象、组件、逻辑、数据结构和其他执行特定任务或实现特定抽象数据类型的计算机装置可执行指令。

此外，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述控制输出数据的方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

以上所述，仅为本发明实施例的具体实施方式，但本发明实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明实施例披露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明实施例的保护范围之内。因此，本发明实施例的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种基于Vue框架实现双向锚点定位方法，其中，所述方法包括：

在Vue生命周期中构建第一监听模块，其中，所述第一监听模块用于对第一监听页面的滚动位置数据进行监听；

通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域；

获得所述第一锚点链接的实时状态；

判断所述第一锚点链接的实时状态是否处于激活状态；

若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置；

根据所述实时页面滚动位置，获得第一相对位置；

根据所述第一相对位置，构建第一页面滚动规则；

按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域。

2.如权利要求1所述的方法，其中，若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置，所述方法还包括：

当所述实时页面滚动位置处于所述第一锚点区域中，获得第一标记指令；

根据所述第一标记指令对所述第一锚点进行状态标记，获得初始状态；

当所述第一用户点击所述第一锚点时，获得第一变更指令；

根据所述第一变更指令，将所述第一锚点的所述初始状态变更为激活状态。

3.如权利要求1所述的方法，其中，所述根据所述第一相对位置，构建第一页面滚动规则，所述方法还包括：

根据所述第一锚点区域和所述实时页面滚动位置，获得所述第一相对位置，其中，所述第一相对位置为所述第一锚点区域与所述实时页面滚动位置的相对位置；

根据所述第一相对位置，确定页面滚动方向，其中，所述页面滚动方向包括向上滚动和向下滚动；

根据所述页面滚动方向，构建所述第一页面滚动规则。

4.如权利要求3所述的方法，所述根据所述页面滚动方向，构建所述第一页面滚动规则，所述方法还包括：

根据所述第一相对位置，获得第一页面滚动距离；

通过对所述第一页面滚动距离进行划分，获得页面子距离集合；

基于所述页面子距离集合，生成第一滚动时间集合，其中，所述页面子距离集合与所述第一滚动时间集合对应；

根据所述第一滚动时间集合和所述页面滚动方向，构建所述第一页面滚动规则。

5.如权利要求1所述的方法，其中，所述按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域，所述方法还包括：

根据所述第一监听模块，获得页面平滑滚动数据；

将所述页面平滑滚动数据输入平滑度分析模型中进行分析，获得第一平滑度；

判断所述第一平滑度是否处于预设平滑度阈值中；

若所述第一平滑度不处于所述预设平滑度阈值中，构建第二页面滚动规则。

6.如权利要求1所述的方法，其中，所述通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域之前，所述方法还包括：

所述第一锚点包括第一锚点组件；

获得所述第一锚点的多属性信息，其中，所述多属性信息包括锚点数据的文案、锚点的唯一标识、锚点的位置、激活状态的色值；

将所述多属性信息输入所述第一锚点组件中；

根据所述第一锚点组件对所述第一锚点进行设置。

7.如权利要求6所述的方法，其中，所述方法还包括：

根据所述多属性信息，获得所述第一锚点的唯一标识；

判断所述第一锚点区域的唯一标识是否与所述第一锚点的唯一标识相同；

当所述第一锚点区域的唯一标识与所述第一锚点的唯一标识不相同，获得第二变更指令；

根据所述第二变更指令，根据所述第一锚点的唯一标识对所述第一锚点区域进行标识。

8.一种基于Vue框架实现双向锚点定位系统，其中，所述系统包括：

第一构建单元，所述第一构建单元用于在Vue生命周期中构建第一监听模块，其中，所述第一监听模块用于对第一监听页面的滚动位置数据进行监听；

第一确定单元，所述第一确定单元用于通过确定第一锚点指定区域第一初始位置和第一结束位置，确定第一锚点区域；

第一获得单元，所述第一获得单元用于获得所述第一锚点链接的实时状态；

第一判断单元，所述第一判断单元用于判断所述第一锚点链接的实时状态是否处于激活状态；

第二获得单元，所述第二获得单元用于若所述第一锚点链接的实时状态处于激活状态，根据所述第一监听模块，获得第一用户的实时页面滚动位置；

第三获得单元，所述第三获得单元用于根据所述实时页面滚动位置，获得第一相对位置；

第二构建单元，所述第二构建单元用于根据所述第一相对位置，构建第一页面滚动规则；

第一滚动单元，所述第一滚动单元用于按照所述第一页面滚动规则将所述第一监听页面平滑滚动至所述第一锚点区域。

9.一种基于Vue框架实现双向锚点定位系统，包括总线、收发器、存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述收发器、所述存储器和所述处理器通过所述总线相连，其特征在于，所述计算机程序被所述处理器执行时实现如权利要求1-7中任一项所述的控制输出数据的方法中的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其中，所述计算机程序被处理器执行时实现如权利要求1-7中任一项所述的控制输出数据的方法中的步骤。

Images