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

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

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


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

技术介绍

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

技术实现思路

[0005]本申请实施例通过提供一种基于Vue框架实现双向锚点定位方法及系统，解决了现有技术在Vue项目中，使用传统的锚点定位与vue
‑
router规则冲突，页面滚动效果过于生硬，不够平缓，本文档来自技高网...

【技术保护点】

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

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