[发明专利]多级选项联动切换组件及其实现方法

说明书

本发明提供一种多级选项联动切换组件，其包括：数据接收模块，用于接收多级选项数据，多级选项数据包括至少一个级别的选项数据；选项卡生成模块，用于根据多级选项数据生成对应的多级选项卡，多级选项卡包括至少一个级别的选项卡；渲染模块，用于渲染多级选项数据得到渲染后的多级选项数据；布局设置模块，用于设置多级选项卡的布局属性；以及轮播滚动模块，用于设置渲染后的多级选项数据的轮播方式。本发明还涉及相关的实现多级选项联动切换的方法。

技术领域

本发明涉及计算机领域，具体涉及一种多级选项联动切换组件以及用于实现多级选项联动切换的方法。

背景技术

现阶段，在游戏直播行业，专题页活动越来越多，尤其是比赛赛事活动，专题页可以通过编辑器搭建，需要提供更多的能支持活动快速上线的一批组件，其中三级选项联动切换组件就是比较重要的一个，针对三级选项联动切换组件，目前通过选项卡组件，轮播图组件，图片组件等等一系列小粒度组件来组合完成。但是组件越多，组件结构嵌套越深，遍历组件去渲染页面时，性能也就越低。

针对三级选项联动切换组件，目前现有技术都是通过自定义组件开发，通过向页面中拖入自定义组件，嵌入动态js脚本，完成三级选项联动切换组件的功能。但是每一个专题活动，都需要去创建一个这样的js模块，代码不能复用，还得发布新开发的js模块代码，一旦赛程数据发生变化，运营需要配置json数据源，对于非开发人员，修改代码数据很容易出错。

因此，有必要提出一种新的用于实现多级选项联动的组件。

发明内容

有鉴于此，为了克服上述问题的至少一个方面，本发明的实施例提供了一种多级选项联动切换组件。

根据本发明的一个方面，提供了一种多级选项联动切换组件，包括：

数据接收模块，用于接收多级选项数据，所述多级选项数据包括至少一个级别的选项数据；

选项卡生成模块，用于根据所述多级选项数据生成对应的多级选项卡，所述多级选项卡包括至少一个级别的选项卡；

渲染模块，用于渲染所述多级选项数据得到渲染后的多级选项数据；

布局设置模块，用于设置所述多级选项卡的布局属性；

轮播滚动模块，用于设置所述渲染后的多级选项数据的轮播方式。

进一步地，所述组件还包括解析模块，通过所述解析模块将数据格式为excel数据格式的多级选项数据转换为json数据格式的多级选项数据，并将所述json数据格式的多级选项数据传送给所述数据接收模块。

进一步地，所述组件还包括数据输入模块，通过数据输入模块直接输入json数据格式的多级选项数据，并将所述json数据格式的多级选项数据传送给所述数据接收模块。

进一步地，所述组件还包括预览模块，用于预览设置轮播方式后的所述渲染后的多级选项数据的呈现效果。

根据本发明的另一方面，提供一种实现多级选项联动的方法，该方法包括以下步骤：

S1，获取多级选项数据，所述多级选项数据包括至少一个级别的选项数据；

S2，根据所述多级选项数据生成对应的多级选项卡，所述多级选项卡包括至少一个级别的选项卡；

S3，渲染所述多级选项数据得到渲染后的多级选项数据；

S4，根据渲染后的多级选项数据设置所述对应的多级选项卡的布局属性；

S5，根据所述布局属性分别设置对应的渲染后的多级选项数据的轮播方式。

例如，在步骤S1中，获取多级选项数据包括通过excel导入所述多级选项数据或者通过数据输入模块直接输入所述多级选项数据。