CN108345455A - 多级选项联动切换组件及其实现方法 - Google Patents

Abstract

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

Description

多级选项联动切换组件及其实现方法

技术领域

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

背景技术

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例如，多级选项数据可以包括一级选项数据、二级选项数据和三级选项数据，其中，

所述一级选项数据包括至少一个一级选项；

所述二级选项数据包括至少一个二级选项数组，所述至少一个二级选项数组中每一个二级选项数组均包括至少一个二级选项；

所述三级选项数据包括至少一个三级选项数组，所述至少一个三级选项数组中每一个三级选项数组均包括至少一个三级选项；

其中，每一个所述一级选项均对应一个二级选项数组，二级选项数组中的每一个二级选项均对应一个三级选项数组。

例如，多级选项卡可以包括一级选项卡、二级选项卡和三级选项卡。

进一步地，步骤S3还包括：

S31，根据需求，选择所述一级选项数据中的一个一级选项，并渲染该一级选项，得到渲染后的一级选项；

S32，根据需求，选择所述渲染后的一级选项对应的二级选项数组中的一个二级选项，得到渲染后的二级选项；

S33，根据需求，选择所述渲染后的二级选项对应的三级选项数组中至少一个三级选项，得到渲染后的三级选项。

例如，步骤S4进一步包括：

S41，根据所述渲染后的一级选项数据设置一级选项卡的布局属性，一级选项卡的布局属性可以包括宽度、高度和/或背景；

S42，根据所述渲染后的二级选项数据设置二级选项卡的布局属性，二级选项卡的布局属性可以包括宽度、高度和/或背景；

S43，根据所述渲染后的三级选项数据设置三级选项卡的布局属性，三级选项卡的布局属性可以包括宽度、高度和/或背景。

例如，步骤S5进一步包括：

S51，根据一级选项卡的布局属性设置所述渲染后的一级选项数据的轮播方式，所述轮播方式包括水平左右循环滚动轮播或垂直上下循环滚动轮播；

S52，根据二级选项卡的布局属性设置所述渲染后的二级选项数据的轮播方式，所述轮播方式包括水平左右循环滚动轮播或垂直上下循环滚动轮播；

S53，根据三级选项卡的布局属性设置所述渲染后的三级选项数据的轮播方式，所述轮播方式包括水平左右循环滚动轮播或垂直上下循环滚动轮播。

与现有技术相比，本发明具有以下优点：

(1)本发明提供的多级选项联动组件，具有通用性，用户只需要向编辑器中拖入对应的三级选项联动切换组件，修改对应的布局，导入赛程数据便可完成，不需每次重复开发新的代码，方便快捷。

(2)在组件中，根据用户配置的数据，渲染对应的多级选项数据，可定制多级选项的外观布局，轮播切换按钮图标，文案字体等等，满足了各种活动场景下的需求。

附图说明

通过下文中参照附图对本发明所作的描述，本发明的其它目的和优点将显而易见，并可帮助对本发明有全面的理解。

图1为本发明实施例提供的多级选项联动切换组件的结构示意图；

图2为本发明实施例提供的实现多级选项联动切换的方法的实施步骤的流程图；

图3为本发明实施例提供的计算机可读存储介质的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明实施例的附图，对本发明的技术方案进行清楚、完整地描述。显然，所描述的实施例是本发明的一个实施例，而不是全部的实施例。基于所描述的本发明的实施例，本领域普通技术人员在无需创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

除非另外定义，本发明使用的技术术语或者科学术语应当为本发明所属领域内具有一般技能的人士所理解的通常意义。

根据本发明的一个方面，提供了一种多级选项联动切换组件100，如图1所示，该多级选项联动切换组件100可以包括数据接收模块101、选项卡生成模块102、渲染模块103、布局设置模块104以及轮播滚动模块105。以下对每个模块作以简要说明。

数据接收模块101用于接收多级选项数据，多级选项数据可以包括至少一个级别的选项数据，例如，多级选项数据可以包括一级选项数据、二级选项数据和三级选项数据。根据需求多级选项数据还可以包括四级选项数据，或者只包括二级选项数据和三级选项数据，或者也可以只包括一级选项数据。

多级选项数据可以来自用户直接输入的数据，也可以通过导入excel数据得到。

选项卡生成模块102可以用于根据多级选项数据生成对应的多级选项卡，多级选项卡可以包括至少一个级别的选项卡，当然多级选项数据包括几个级别的选项数据，就生成几个级别的选项卡。例如，多级选项数据可以包括一级选项数据、二级选项数据和三级选项数据，则生成一级选项卡、二级选项卡和三级选项卡。

渲染模块103可以用于渲染多级选项数据得到渲染后的多级选项数据。

布局设置模块104可以用于设置多级选项卡的布局属性，布局属性可以包括选项卡的高度、宽度以及背景等等，当然，也可以仅包括高度、宽度和背景中的任一种或多种，或者也可以包括其他布局属性。

轮播滚动模块105可以用于设置渲染后的多级选项数据的轮播方式，例如，可以设置成包含一个特定级别的选项数据的单级轮播滚动或者包含多个特定级别的选项数据的多级轮播滚动。

在进一步较佳实施例中，组件100还可以包括解析模块，可以通过解析模块将数据格式为excel数据格式的多级选项数据转换为json数据格式的多级选项数据，进而将json数据格式的多级选项数据传送给数据接收模块101，得到多级选项数据。

在进一步较佳实施例中，组件100还可以包括数据输入模块，通过数据输入模块直接输入json数据格式的多级选项数据，并将json数据格式的多级选项数据传送给数据接收模块101，就可以得到所需的多级选项数据。

在进一步较佳实施例中，组件100还可以包括预览模块，用于预览设置轮播方式后的并且渲染后的多级选项数据的呈现效果。

在进一步较佳实施例中，组件100可以有初始化数据，即默认数据，默认数据可以包括多级选项数据、渲染数据以及选项卡的布局属性数据，用户可以通过直接修改默认数据就可得到所需求的多级选项切换效果。

当开发人员需要实现三级选项联动切换组件100的功能时，只需要拖入多级选项联动切换组件100到编辑器中，然后配置组件100所需一级选项、二级选项和三级选项的对应数据，编辑对应的一级选项、二级选项和三级选项布局属性。布局和数据的配置都是实时更新，所见即所得，点击预览也可以预览三级选项联动切换组件100的展示效果。并且利用根据本发明的多级选项联动切换组件100能够可视化配置一级选项布局属性和数据、二级选项布局属性和数据以及三级选项布局属性和数据，能够通过选中一级选项联动切换二级选项以及三级选项，选中二级选项联动切换三级选项，实现了嵌套三级的联动切换的大数据量展示。

本发明实施例还提供了一种实现多级选项联动切换的方法。如图2所示，根据本发明的实现多级选项联动切换的方法可以包括以下步骤S1、S2、S3、S4和S5，以下对各个步骤进行详细说明。

步骤S1，获取多级选项数据，多级选项数据可以包括至少一个级别的选项数据。

在本实施例中，多级选项数据可以通过excel导入，也可以通过数据输入模块直接输入组件100。

具体的，多级选项数据可以包括三个级别的选项数据，分别为一级选项数据、二级选项数据、三级选项数据，其中：

一级选项数据可以包括至少一个一级选项；

一级选项数据的数据类型为数组数据，数组中的每一项均为一个对象，每一个对象均为一个一级选项；其中，对象的数据结构为，id作为一级选项标识，name作为一级选项的中文描述，即，每一个一级选项均对应一个一级选项标识。

二级选项数据可以包括至少一个二级选项数组，至少一个二级选项数组中每一个二级选项数组均包括至少一个二级选项；

二级选项数据的数据类型为对象数据，数据格式为数组形式，并以一级选项标识id作为键，二级选项数组作为值；其中，二级选项数组中的单个数据为一个对象，即。每个对象均为一个二级选项，二级选项数据的对象数据结构为，type作为二级选项标识，date作为二级选项的中文描述，即，每一个二级选项均对应一个二级选项标识。

三级选项数据包括至少一个三级选项数组，至少一个三级选项数组中每一个三级选项数组均包括至少一个三级选项；

三级选项数据的数据类型为对象数据，数据格式为数组形式，数组里每一个数据为一个对象，即，每一个对象均为一个三级选项，对象描述为：三级选项需要展示的详情数据，包括logo，日期，背景图，跳转链接等等数据；并以二级选项标识type作为键，三级选项数组作为值，并且每一个三级选项均可以有一个对应的三级选项标识。

其中，每一个一级选项均对应一个二级选项数组，二级选项数组中的每一个二级选项均对应一个三级选项数组，即当选中一个一级选项标识时，就会得到一个对应的二级选项数组，选中这个二级选项数组中的一个二级选项标识时，就会得到一个对应的三级选项数组。

在具体实施过程中，当一级选项数据、二级选项数据和三级选项数据通过excel表格导入时，可以将一级选项数据配置在excel表格对应的第一个表格里，二级选项数据配置在excel表格对应的第二个表格里，三级选项数据配置在excel表格对应的第三个表格里。然后采用XLSX插件将excel数据转化成json数据格式，循环遍历json数据，以当前遍历索引，以及当前表格标题索引，取出对应的excel单元格数据。将单元格数据依次压入数组，生成对应的json格式的一级选项数据、二级选项数据和三级选项数据。

这样，可以通过excel表格数据提供一级，二级和三级数据配置入口，方便不懂代码的用户进行傻瓜式配置，方便简单，快速便捷。

在其他实施例中，也可以通过数据输入模块直接将json格式的一级选项数据、二级选项数据和三级选项数据传入组件100中。

步骤S2，根据多级选项数据生成对应的多级选项卡，多级选项卡包括至少一个级别的选项卡。

在本实施例中，多级选项卡可以包括三个级别的选项卡，分别为一级选项卡、二级选项卡和三级选项卡，即生成一级选项区域、二级选项区域和三级选项区域。

步骤S3，渲染多级选项数据得到渲染后的多级选项数据。

在进一步较佳实施例中，步骤S3可以进一步包括：

S31，根据需求，选择一级选项数据中的其中一个一级选项，并渲染该一级选项，得到渲染后的一级选项；

在具体实施过程中，可以将选中的一级选项标识传入一级选项渲染函数中，该函数中会获取一级选项用户配置的一级选项的数组数据，循环遍历该数组，拼接成html模板代码，嵌入到已经初始化好的一级选项父容器中，并高亮选中对应的一级选项选中标识。

这样，使用公共的一级渲染模块103，只需要传入选中的一级选项标识即可渲染对应的一级选项。当然，也可以传入不同的一级选项标识即可渲染不同的一级选项。

S32，根据需求，选择渲染后的一级选项对应的二级选项数组中的一个二级选项，得到渲染后的二级选项；

在具体实施过程中，可以将选中的一级选项标识和选中的二级选项标识传入二级选项渲染函数中，该函数会获取用户配置的二级选项数组，以选中的一级选项标识作为键去取二级选项数组，得到对应的要展示的二级选项数组，循环遍历得到的二级选项数组，拼接成html模板代码，嵌入到已经初始化好的二级选项父容器中，并高亮选中对应的选中的二级选项标识。

这样，使用公共的二级渲染模块103，只需要传入选中的一级选项标识和选中的二级选项标识即可渲染对应的二级选项。

当然，根据需求，也可以通过选中的一级选项标识和选中的不同的二级选项标识即可渲染一级选项所对应的二级选项数组中不同的二级选项。

S33，根据需求，选择渲染后的二级选项对应的三级选项数组中至少一个三级选项，得到渲染后的三级选项。

在具体实施过程中，可以将选中的二级选项标识和三级选项标识传入三级选项渲染函数中，该函数会获取三级选项用户配置的三级选项数据的数组数据，以选中的二级选项标识作为键去取三级选项数据的数组数据，得到对应的要展示的三级选项，并且根据当前三级选项的轮播页码，计算得到该三级选项在该页码的起始索引和结束索引，循环遍历得到的三级选项数据以及起始索引，结束索引，拼接成html模板代码，嵌入到已经初始化好的三级选项父容器中。

而且对于三级选项的翻页功能，直接传入当前选中的三级标识和页码，计算出数组里对应显示的起始索引和结束索引，渲染出三级选项滚动列表，从而实现分页。

这样，使用公共的三级渲染模块103，只需要传入选中的二级标识和选中的三级选项标识即可渲染对应的三级选项。

当然，也可以通过选中的二级选项标识和选中的不同的三级选项标识即可渲染二级选项所对应的三级选项数组中不同的三级选项。

这样，通过id标识，数据联动的方式，来渲染二级选项和三级选项；二级选项数据定义为对象形式，方便一级选项选中标识id，作为键查询对象对应的数据，一级选项对应的数据为二级选项数据，二级选项数据格式一定是数组形式。二级选项数据type作为标识，选择二级选项时，会将对应这个标识传入，三级选项渲染函数中，根据type标识，去解析三级选项详情数据，获取对应type的三级选项列表数据；html结构简单易懂，减少了额外的html结构开支。

步骤S4，根据渲染后的多级选项数据设置对应的多级选项卡的布局属性。

在进一步较佳实施例中，步骤S4可以进一步包括：

S41，根据渲染后的一级选项数据设置一级选项卡的布局属性，一级选项卡的布局属性可以包括宽度、高度和/或背景；

S42，根据渲染后的二级选项数据设置二级选项卡的布局属性，二级选项卡的布局属性可以包括宽度、高度和/或背景；

S43，根据渲染后的三级选项数据设置三级选项卡的布局属性，三级选项卡的布局属性可以包括宽度、高度和/或背景。

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

在具体实施过程中，可以通过获取渲染后的单个一级选项的宽度和高度，根据用户配置选项个数以及每个选项宽度和高度，计算出所有一级选项所需总宽度或总高度，设置一级选项卡的总宽度或总高度。二级选项和三级选项设置同理，在此不再赘述。

在进一步较佳实施例中，步骤S5可以进一步包括：

S51，根据一级选项卡的布局属性设置一级选项数据的轮播方式，轮播方式可以包括水平左右循环滚动轮播或垂直上下循环滚动轮播；

S52，根据二级选项卡的布局属性设置二级选项数据的轮播方式，轮播方式可以包括水平左右循环滚动轮播或垂直上下循环滚动轮播；

S53，根据三级选项卡的布局属性设置三级选项数据的轮播方式，轮播方式可以包括水平左右循环滚动轮播或垂直上下循环滚动轮播。

在具体实施过程中，当设置为水平左右循环滚动轮播时，可以每次只出现一个渲染后的对应级别的选项，也可以出现多个渲染后的对应级别的选项；当设置为垂直上下循环滚动轮播时，可以每次只出现一个渲染后的对应级别的选项，也可以出现多个对应级别的选项。

当然，也可以设置成其他形式的轮播方式。

这样，采用独立的轮播滚动模块105，共用同一轮播逻辑，只需要传入对应的轮播配置，即可完成轮播设置以及左右轮播箭头事件的绑定。

当一级选项和二级选项个数比较多时，所占宽度超出了多级选项联动切换组件100设置的宽度，此时，用户需要手工开启轮播功能，选中一级选项卡或者二级选项卡，提供对应的容器布局编辑面板，提供左右切换按钮布局配置，将其设置为块级元素(即为显示)，并设置左右切换按钮的左、上定距，以确认其位置。选择多级选项联动切换组件100的父容器，切换到自定义面板，配置轮播效果，一级选项轮播配置文本框为single，即为单个选项滚动，配置为full，即为全屏滚动，需要设置选项卡整屏轮播个数(如果设置为4，则每次轮播滚动距离为4个一级选项内容宽度)。

在进一步较佳实施例中，还可以包括步骤S6，预览设置轮播方式后的渲染后的一级选项数据、渲染后的二级选项数以及渲染后的三级选项的呈现效果。

在具体实施过程中，当点击预览时，会启动三级选项联动切换的预览模块，通过编辑器编译生成的多级选项联动切换组件100的一级选项父容器html结构、二级选项父容器html结构、三级选项父容器html结构以及该三级选项联动切换组件100的默认样式，就可以预览用户配置的布局以及渲染后的一级、二级和三级选项数据的呈现效果。

在进一步较佳实施例中，还可以将一级选项数据、二级选项数据和三级选项数导出为excel数据。

在具体实施过程中，可以采用XLSX技术，初始化Workbook实例wb，将生成好的对应的一级选项数据，转化成excel表格需要的数组格式数据ws。然后以一级选项所在表格索引，生成excel表格名wsName，将表格名压入表格wb.sheetNames数组中，并设置wb.sheets[wsName]＝ws.最后转化为二进制文件写入excel表格中，随后设置excel表格文件名。二级选项数据和三级选项数据转化同理，不再赘述。

这样，通过导出一级选项、二级选项和三级选项数据到excel表格中，并下载到本地电脑，方便用户在上一次编辑的基础上，进行第二次数据修改，减少了出错概率，并且快速便捷，无需重新编辑所有数据，只需要按照实际需要进行适当修改。

在其他实施例中，组件100可以被设置有默认数据，默认数据可以包括一级选项数据和一级选项卡布局属性、二级选项数据和二级选项卡布局属性、三级选项数据和三级选项卡布局属性、渲染后的一级选项数据、渲染后的二级选项数据以及渲染后的三级选项数据。

用户可以在默认数据的基础上进行修改，例如，用户可以将默认的一级选项数据、二级选项数据和三级选项数据导出excel数据形式，在此基础上进行修改。

在其他实施例中，多级选项数据可以为仅二级选项数据和三级选项数据。

二级选项数据包括至少一个二级选项数组，至少一个二级选项数组中的每一个二级选项数组均包括至少一个二级选项；

三级选项数据包括至少一个三级选项数组，至少一个三级选项数组中的每一个三级选项数组均包括至少一个三级选项；

其中，二级选项数组中的每一个二级选项均对应一个三级选项数组。

多级选项卡也可以仅包括两个级别的选项卡，分别为二级选项卡和三级选项卡。

关于渲染、布局属性设置以及轮播的具体实施细节与上述存在一级选项数据情况下一致，此处就不再赘述。

当然，本发明并不仅仅限于三级联动和二级联动，也可以只有一个级别的数据，或者多于三个级别的数据，其渲染、布局属性设置以及轮播的具体实施细节与上述实施例中的描述一致，此处就不再赘述。

基于同一发明构思，参考图3所示，本发明的实施例还提供一种计算机可读存储介质201，其上存储有可执行指令202，可执行指令202在由一个或多个处理器执行时，可以实现如上实施例中的任一者所述的实施多级选项联动的方法的步骤。

对于本发明的实施例，还需要说明的是，在不冲突的情况下，本发明的实施例及实施例中的特征可以相互组合以得到新的实施例。

最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。

Claims (10)

1.一种多级选项联动切换组件，所述组件包括：

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

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

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

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

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

2.如权利要求1所述的组件，其特征在于，所述组件还包括解析模块，通过所述解析模块将数据格式为excel数据格式的多级选项数据转换为json数据格式的多级选项数据，并将所述json数据格式的多级选项数据传送给所述数据接收模块。

3.如权利要求1所述的组件，其特征在于，所述组件还包括数据输入模块，通过数据输入模块直接输入json数据格式的多级选项数据，并将所述json数据格式的多级选项数据传送给所述数据接收模块。

4.如权利要求1-3中任一项所述的组件，其特征在于，所述组件还包括预览模块，用于预览设置轮播方式后的所述渲染后的多级选项数据的呈现效果。

5.一种用于实现多级选项联动切换的方法，包括以下步骤：

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

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

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

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

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

6.如权利要求5所述的方法，其特征在于，在步骤S1中，获取多级选项数据包括通过excel导入所述多级选项数据，或通过数据输入模块直接输入所述多级选项数据。

7.如权利要求5或6所述的方法，其特征在于，所述多级选项数据包括一级选项数据、二级选项数据和三级选项数据，其中，

所述一级选项数据包括至少一个一级选项；

所述二级选项数据包括至少一个二级选项数组，所述至少一个二级选项数组中的每一个二级选项数组均包括至少一个二级选项；

所述三级选项数据包括至少一个三级选项数组，所述至少一个三级选项数组中的每一个三级选项数组均包括至少一个三级选项；

其中，每一个所述一级选项均对应一个二级选项数组，所述二级选项数组中的每一个二级选项均对应一个三级选项数组；以及

所述多级选项卡包括一级选项卡、二级选项卡和三级选项卡。

8.如权利要求7所述的方法，其特征在于，所述步骤S3进一步包括：

S31，根据需求，选择所述一级选项数据中的其中一个一级选项，并渲染该一级选项，得到渲染后的一级选项；

S32，根据需求，选择所述渲染后的一级选项对应的二级选项数组中的一个二级选项，得到渲染后的二级选项；以及

S33，根据需求，选择所述渲染后的二级选项对应的三级选项数组中至少一个三级选项，得到渲染后的三级选项。

9.如权利要求8所述的方法，其特征在于，所述步骤S4进一步包括：

S41，根据所述渲染后的一级选项数据设置一级选项卡的布局属性，所述一级选项卡的布局属性包括宽度、高度和/或背景；

S42，根据所述渲染后的二级选项数据设置二级选项卡的布局属性，所述二级选项卡的布局属性包括宽度、高度和/或背景；以及

S43，根据所述渲染后的三级选项数据设置三级选项卡的布局属性，所述三级选项卡的布局属性包括宽度、高度和/或背景。

10.如权利要求9所述的方法，其特征在于，所述步骤S5进一步包括：

S51，根据所述一级选项卡的布局属性设置所述渲染后的一级选项数据的轮播方式，所述轮播方式包括水平左右循环滚动轮播或垂直上下循环滚动轮播；

S52，根据所述二级选项卡的布局属性设置所述渲染后的二级选项数据的轮播方式，所述轮播方式包括水平左右循环滚动轮播或垂直上下循环滚动轮播；以及

S53，根据所述三级选项卡的布局属性设置所述渲染后的三级选项数据的轮播方式，所述轮播方式包括水平左右循环滚动轮播或垂直上下循环滚动轮播。