一种基于VUE的蜂巢动效实现方法、装置、设备及介质制造方法及图纸

本申请提供一种基于VUE的蜂巢动效实现方法、装置、设备及介质，在接收到用户对滚动条的滚动操作时，利用板块可视检测Vue插件检测目标板块页面是否位于视口区域内；若是，则触发目标板块页面的上滑动效，以便目标板块页面显示在视口区域内；在通过蜂巢元素可视检测Vue插件，检测到目标板块页面中的蜂巢元素位于视口区域内时，通过上滑定位Vue插件将蜂巢元素的class属性修改，并触发蜂巢元素的上滑动效，以便蜂巢元素显示在视口区域内的目标位置处。通过设置三个Vue插件可以分别实现目标板块页面的可视检测、蜂巢元素的可视检测以及蜂巢元素的上滑定位，结合上滑动效，可以实现蜂巢动效的显示，在页面开发中可复用性高。

【技术实现步骤摘要】

本申请涉及计算机领域，特别涉及一种基于vue的蜂巢动效实现方法、装置、设备及介质。

技术介绍

1、目前，人们打开各种应用时，常常会看到页面中的元素以各种动效方式进行展现。基于需求文档中对于蜂巢动效的描述，该动效需要实现用户鼠标滚动下滑页面，当蜂巢样式的元素进入页面可视区域内时，触发页面整体上滑动效，并触发蜂巢动效，使当前板块展示在可视区域内，并显示具体页面数据，当鼠标悬浮在具体的蜂巢样式上时，蜂巢内部样式进行缩放。目前，尚未提出有关蜂巢动效的合适的实现方法，仅通过第三方组件库、动效库难以实现。

技术实现思路

1、有鉴于此，本申请的目的在于提供一种基于vue的蜂巢动效实现方法、装置、设备及介质，申请通过编写vue插件实现了一种蜂巢动效，在页面开发中可复用性高，能够避免代码冗余，能够以更美观地展示网页信息，为用户提供良好地视觉体验。其具体方案如下：

2、一方面，本申请提供了一种基于vue的蜂巢动效实现方法，包括：

3、在接收到用户对滚动条的滚动操作时，利用板块可视检测vue插件检测目标板块本文档来自技高网...

【技术保护点】

1.一种基于Vue的蜂巢动效实现方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，在所述在接收到用户对滚动条的滚动操作时，利用板块可视检测Vue插件检测目标板块页面是否位于视口区域内之前，所述方法还包括：

3.根据权利要求1所述的方法，其特征在于，在所述在接收到用户对滚动条的滚动操作时，利用板块可视检测Vue插件检测目标板块页面是否位于视口区域内之前，所述方法还包括：

4.根据权利要求1-3任意一项所述的方法，其特征在于，所述通过蜂巢元素可视检测Vue插件，检测到所述目标板块页面中的蜂巢元素位于所述视口区域内，包括：

5....

【技术特征摘要】

1.一种基于vue的蜂巢动效实现方法，其特征在于，包括：

2.根据权利要求1所述的方法，其特征在于，在所述在接收到用户对滚动条的滚动操作时，利用板块可视检测vue插件检测目标板块页面是否位于视口区域内之前，所述方法还包括：

3.根据权利要求1所述的方法，其特征在于，在所述在接收到用户对滚动条的滚动操作时，利用板块可视检测vue插件检测目标板块页面是否位于视口区域内之前，所述方法还包括：

4.根据权利要求1-3任意一项所述的方法，其特征在于，所述通过蜂巢元素可视检测vue插件，检测到所述目标板块页面中的蜂巢元素位于所述视口区域内，包括：

【专利技术属性】
技术研发人员：王冰茹，王一，
申请(专利权)人：中国农业银行股份有限公司，
类型：发明
国别省市：

全部详细技术资料下载 我是这个专利的主人