[发明专利]一种实现多Tab页面切换的方法

说明书

本发明公开了一种实现多Tab页面切换的方法,适用于Android和ios以及小程序等交互界面整个菜单界面主要包含三个区域：当前操作Tab区(可视化)、全部Tab区(可隐藏)及数据内容显示区，发明了不限Tab数量的多Tab页切换方法。其中当前可操作区中包括3个Tab以及“更多”标签，点击任一Tab可进入对应的内容显示区，点击更多可进入全部Tab区，在全部Tab区中点击任一Tab可切换到对应Tab对应的内容显示区，并且把该tab页移入当前操作tab区，以方便下次切换。由此可实现在同一界面切换不限数量的不同内容区。

技术领域

本发明涉及web前端技术领域，具体是一种实现多Tab页面切换的方法。

背景技术

在传统的前端系统中,实现多个Tab页通常是为每一个页面创建一页的用户界面对象(即UI对象),这将导致在Tab页数量较多时,会大量创建UI对象,频繁切换Tab页时,系统将对UI对象进行频繁的计算与排版操作,这将增加CPU消耗并占用大量内存空间。

基于以上问题，技术工作者们发明了在同一区域内进行Tab切换的交互方式。当前已发明的多Tab页面切换方法中,大多数只有当前可操作Tab区和数据内容显示区,这使得页面中可切换页面的数量和可容纳信息量大大降低,对于需要展示更多数量页面的需求将难以实现。

对比当前element官网中NavMenu导航菜单，其虽实现了不同页面的切换方法,但由于导航栏中能容纳的Tab项有限,因此其可切换的页面数量也有限,若在导航栏中增加Tab项数量,数量增大到一定数目将使得Tab间距变小从而影响视觉体验,因此NavMenu导航菜单无法在不影响视觉体验的情况下无限增加Tab数量,这无法满足当今社会对于产品既要美观又追求效率的需求,为满足这一需求，我们提出了一种实现多Tab页面切换的方法来解决上述所提到的问题。

发明内容

本发明的目的在于提供一种实现多Tab页面切换的方法，以解决上述背景技术中提出的问题。

为实现上述目的，本发明提供如下技术方案：

一种实现多Tab页面切换的方法，包括以下步骤：

步骤一：定义三个数组分别存放可视化操作Tab区、可隐藏全部Tab区以及数据内容显示区，用于存放各个tab页的数据,包含tab页的名称以及所关联页面的重要信息。

步骤二：为“更多”标签页设置是否打开的布尔型变量；

步骤三：对“更多”标签的点击增加遮罩层；

步骤四：设置一个变量暂存当前用户点击的tab标签序号；

步骤五：设置监听，每次用户点击普通标签页和更多标签页，包括点击可操作区tab区域的时候,都会触发对应的事件；

步骤六：标签页被点击时,更改当前用户点击的tab标签序号，并根据所关联页面的重要信息切换展示到对应的页面；

步骤七：对于用户点击可视化操作tab区域的时候,仅切换页面内显示的内容进行展示,但是不改变可操作区域本身以及全部tab区域的内容以及顺序；

步骤八：当用户点击”更多”标签的时候,下拉展示全部的tab页平铺给用户查找,并显示遮罩层；

步骤九：当用户点击可选择tab页外部遮罩层的时候,隐藏遮罩层并回到可视化操作Tab区显示部分；

步骤十：对用户在全部标签页中的点击项做出判断,若标签页不在原本可视化tab区域内,则将可视化tab区域的核心位置替换为当前用户选择的tab页,并同步更新可视化操作Tab区

作为本发明进一步的方案：所述还包括触摸式移动终端与切换系统；

所述触摸式移动终端，具有交互界面，所述交互界面包括Tab区和数据区；