CN110276029A

CN110276029A - Tab页面切换方法、电子装置及存储介质

Info

Publication number: CN110276029A
Application number: CN201910419502.0A
Authority: CN
Inventors: 李明阳
Original assignee: Ping An Property and Casualty Insurance Company of China Ltd
Current assignee: Ping An Property and Casualty Insurance Company of China Ltd
Priority date: 2019-05-20
Filing date: 2019-05-20
Publication date: 2019-09-24

Abstract

本发明涉及数据处理技术，提供了一种Tab页面切换方法、电子装置及存储介质。该方法先获取初始页面的窗口宽度，根据窗口宽度计算标签选项的宽度，并根据预设排序规则对标签选项进行排序及渲染。之后，监测标签选项的网络站点及索引序号的指标并将指标存储于对应的容器，当监测到索引序号发生变化时，将当前标签选项切换至目标标签选项的显示页面，并查询容器是否存储有数据，当容器中存储有数据时，获取目标标签选项的网络站点，若与当前标签选项的网络站点相同，将当前标签选项的数据切换至目标标签选项的数据。利用本发明，通过对标签选项的索引序号及网络站点的监测，解决标签选项切换过程中出现页面空白的问题，实现对数据的按需加载。

Description

Tab页面切换方法、电子装置及存储介质

技术领域

本发明涉及数据处理领域，尤其涉及一种Tab页面切换方法、电子装置及存储介质。

背景技术

随着互联网的高速发展，在满足了大众可用性的基础上，用户体验显得越来越重要。互联网产品中良好的页面切换体验，会带来更高的用户粘性、用户回访率、以及更强的品牌竞争力。

目前，在Tab页面标签切换过程中，因为加载出页面需要时间，进行页面切换的一段时间内会出现页面空白的情况，当遇到业务场景差异化的问题，则需要开发多套组件应对。

发明内容

鉴于以上内容，本发明提供一种Tab页面切换方法、电子装置及存储介质，其目的在于解决tab页面标签选项切换过程中出现页面空白的问题，通过对标签选项的索引序号及网络站点的监测，实现对数据的按需加载。

为实现上述目的，本发明提供一种Tab页面切换方法，该方法包括：

初始化步骤：获取所述Tab页面初始化的窗口宽度，根据所述窗口宽度计算所述标签选项的宽度，并根据预设排序规则对所有标签选项进行排序及渲染；

监测步骤：监测所述所有标签选项的索引序号及网络站点的指标并将所述指标存储于每个标签选项对应的容器；及

切换步骤：当监测到当前标签选项的索引序号发生变化时，将所述当前标签选项的显示页面切换至目标标签选项的显示页面，并查询所述目标标签选项的容器是否存储有目标标签选项的数据，当所述容器中存储有所述数据时，获取所述目标标签选项的网络站点，判断所述网络站点与当前标签选项的网络站点是否相同，当所述网络站点与当前标签选项的网络站点相同时，将当前标签选项的数据切换至目标标签选项的数据。

优选的，所述预设排序规则包括：将处于激活状态的标签选项自左向右排序，将处于未激活状态的标签选项隐藏在所述窗口两侧。

优选的，所述网络站点包括网站编号及网站名称，所述索引序号包括标签选项的索引序号及该标签选项子菜单的索引序号。

优选的，所述当监测到当前标签选项的索引序号发生变化时之后，还包括：利用预设算法计算所有标签选项到所述窗口的距离；所述将所述当前标签选项的显示页面切换至目标标签选项的显示页面具体包括：根据所述距离将所述目标标签选项的显示页面移动至所述窗口。

优选的，所述切换步骤还包括：当所述目标标签选项的容器未存储该标签选项的数据时，触发网络请求加载所述数据。

为实现上述目的，本发明还提供一种电子装置，该电子装置包括：存储器及处理器，其特征在于，所述存储器上存储Tab页面切换程序，所述Tab页面切换程序被所述处理器执行，实现如下步骤：

为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质中包括Tab页面切换程序，所述Tab页面切换程序被处理器执行时，可实现如上所述Tab页面切换方法中的任意步骤。

本发明提出的Tab页面切换方法、电子装置及存储介质，解决Tab 页面标签选项在切换过程中，因标签选项的加载需要时间，导致出现页面空白的问题，通过对标签选项的索引序号及网络站点的监测，在切换时调用已加载的数据，实现对Tab页面标签选项切换时数据的按需加载。

附图说明

图1为本发明电子装置较佳实施例的示意图；

图2为图1中Tab页面切换程序较佳实施例的模块示意图；

图3为本发明Tab页面切换方法较佳实施例的流程图；

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

参照图1所示，为本发明电子装置1较佳实施例的示意图。

该电子装置1包括但不限于：存储器11、处理器12、显示器13 及网络接口14。所述电子装置1通过网络接口14连接网络，获取原始数据。其中，所述网络可以是企业内部网(Intranet)、互联网 (Internet)、全球移动通讯系统(Global System of Mobilecommunication，GSM)、宽带码分多址(Wideband Code Division Multiple Access，WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、 Wi-Fi、通话网络等无线或有线网络。

其中，存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX 存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器11可以是所述电子装置1的内部存储单元，例如该电子装置1的硬盘或内存。在另一些实施例中，所述存储器 11也可以是所述电子装置1的外部存储设备，例如该电子装置1配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字 (Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，所述存储器11还可以既包括所述电子装置1的内部存储单元也包括其外部存储设备。本实施例中，存储器11通常用于存储安装于所述电子装置 1的操作系统和各类应用软件，例如Tab页面切换程序10的程序代码等。此外，存储器11还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器12在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器12通常用于控制所述电子装置1的总体操作，例如执行数据交互或者通信相关的控制和处理等。本实施例中，所述处理器12用于运行所述存储器11中存储的程序代码或者处理数据，例如运行Tab页面切换程序10的程序代码等。

显示器13可以称为显示屏或显示单元。在一些实施例中显示器 13可以是LED显示器、液晶显示器、触控式液晶显示器以及有机发光二极管(Organic Light-EmittingDiode，OLED)触摸器等。显示器 13用于显示在电子装置1中处理的信息以及用于显示可视化的工作界面，例如显示数据统计的结果。

网络接口14可选地可以包括标准的有线接口、无线接口(如 WI-FI接口)，该网络接口14通常用于在所述电子装置1与其它电子设备之间建立通信连接。

图1仅示出了具有组件11-14以及Tab页面切换程序10的电子装置1，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

可选地，所述电子装置1还可以包括用户接口，用户接口可以包括显示器(Display)、输入单元比如键盘(Keyboard)，可选的用户接口还可以包括标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及有机发光二极管(Organic Light-Emitting Diode，OLED)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子装置1中处理的信息以及用于显示可视化的用户界面。

该电子装置1还可以包括射频(Radio Frequency，RF)电路、传感器和音频电路等等，在此不再赘述。

在上述实施例中，处理器12执行存储器11中存储的Tab页面切换程序10时可以实现如下步骤：

关于上述步骤的详细介绍，请参照下述图2关于Tab页面切换程序 10实施例的程序模块图以及图3关于Tab页面切换方法实施例的流程图的说明。

在其他实施例中，所述Tab页面切换程序10可以被分割为多个模块，该多个模块被存储于存储器12中，并由处理器13执行，以完成本发明。本发明所称的模块是指能够完成特定功能的一系列计算机程序指令段。

参照图2所示，为图1中Tab页面切换程序10一实施例的程序模块图。在本实施例中，所述Tab页面切换程序10可以被分割为：初始化模块110、监测模块120及切换模块130。

初始化模块110，用于获取所述Tab页面初始化的窗口宽度，根据所述窗口宽度计算所述标签选项的宽度，并根据预设排序规则对所有标签选项进行排序及渲染。

在本实施例中，获取初始Tab页面的窗口宽度的方法包括但不限于通过JavaScript调用浏览器对象模型Client Width(网页可见区域宽，不包括滚动条和边框)，得到浏览器宽度。页面展示在屏幕从外到内的容器为：屏幕、浏览器及页面本身，页面的元素展现在页面内，页面展现在浏览器内，浏览器展现在屏幕内，即浏览器宽度为初始Tab 页面的窗口宽度。

其中，每个标签选项的宽度相等，计算标签选项宽度的方法包括：

定义变量swiperItem为子菜单长度，如在城市包含深圳和上海， swiperItem即为2，const swiperItem＝this.childs＝this.titleList.length；

定义单个容器的宽度，即为浏览器宽度，const swiperWidth＝this.swiperWidth＝this.$refs.swiperElem.clientWidth；

定义单个标签选项的宽度，为浏览器宽度除以子菜单长度， this.lineStep＝Math.ceil(swiperWidth/this.titleList.length)。

标签选项进行排序的规则包括：对于active属性为true的标签选项，渲染此类标签选项自左向右连接。对于active属性为false的标签选项，则将其隐藏在窗口两侧。

进一步地，将JSON格式的参数传入所有标签选项的容器。对于 Tab页面的标签选项和该标签选项子菜单的标题，采用JSON注入的方式，传入JSON格式参数titleList，可自定义标题，应对多场景情况。

例如：查看两个城市的男女比例，则titleList为：

[

{title:'深圳'，childs:[{title:'男'},{title:'女'}]},

{title:'上海'，childs:[{title:'男'},{title:'女'}]}

]

active为‘0’时表示选中深圳，active为‘1’是表示选中上海，当active为‘0’，TabchildFlag为‘0’时则表示选中深圳的男性。

监测模块120，用于监测所述所有标签选项的索引序号及网络站点的指标并将所述指标存储于每个标签选项对应的容器。

在本实施例中，标签选项的网络站点及索引序号变动会被实时监测，每个被监测的指标发生变化时，变化的指标会传入标签选项对应的容器，不需要获取具体需要变动的DOM节点。其中，Tab页面的标签选项的DOM结构是首次进入时加载完成的，页面DOM结构渲染完成之前开始监测，页面离开之后停止监测。

其中，监测标签选项的索引序号可以是监测手指滑动方向行数 swiper，如果向右滑动则索引序号值加一，向左滑动则索引序号值减一。

每个标签选项对应一个容器，容器内是当前选择条件下的内容，每个标签选项的所有子菜单共用一个容器，在监测网络站点的同时，当前网络站点会存储到所有标签选项对应的容器内。其中，网络站点包括网站编号和网站名称，索引序号包括标签选项的索引序号、子菜单的索引序号，网络站点及索引序号的变动会被实时监测并传入当前标签选项的容器内。

切换模块130，用于当监测到当前标签选项的索引序号发生变化时，将所述当前标签选项的显示页面切换至目标标签选项的显示页面，并查询所述目标标签选项的容器是否存储有目标标签选项的数据，当所述容器中存储有所述数据时，获取所述目标标签选项的网络站点，判断所述网络站点与当前标签选项的网络站点是否相同，当所述网络站点与当前标签选项的网络站点相同时，将当前标签选项的数据切换至目标标签选项的数据。

在本实施例中，当前标签选项是指正在窗口中显示的标签选项，当标签选项的索引序号发生变化时，所有标签选项到窗口的距离会被重新计算，在切换标签选项的同时，标签选项对应的容器及显示页面会按照计算得出的距离滑动到可视窗口。容器的数量和标签选项的数量相对应，通过标签选项的数量即可得到容器数量，同时可对容器进行排序。其中，计算标签选项到可视窗口的距离的方法包括传入num 参数，用容器宽度乘以active值得到容器到窗口的距离。

当目标标签选项的显示页面滑动到可视窗口中显示时，查询目标标签选项的容器内是否存储有目标标签选项的数据，当目标标签选项的容器不存在目标标签选项的数据时，触发网络请求加载目标标签选项对应的数据。当目标标签选项的容器存在对应数据时，则获取目标标签选项进入可视窗口的网络站点，将该网络站点与当前标签选项的网络站点进行比较。其中，网络站点可以是网站编号或网站名称。

当网络站点不同时，将目标标签选项容器内的数据删除，并触发网络请求重新加载数据进行标签选项数据的切换。当网络站点相同时，则调用标签选项容器的缓存数据将当前标签选项的数据切换成目标标签选项数据。进一步地，当标签选项的子菜单的索引序号发生改变时，标签选项对应的容器不会滑动，但会触发网络请求加载目标子菜单的数据，并将当前子菜单切换至目标子菜单。

例如：当页面的标签选项第二次进入可视窗口时，会将该标签选项上次在可视窗口显示时的网络站点与当前网络站点进行对比，如果没有变化则不会触发网络请求，保持页面缓存的记忆性，如果网络站点发生变化，则删除页面之前的数据，重新加载数据。又例如：首次进入页面默认加载第一个标签选项,此时网站名称为“model”，当切换到另一个标签选项的页面之后，如果在未改变网站的情况下切换至默认加载的第一个标签选项，则不会触发网络请求，如果改变网站后进行切换则会触发网络请求，重新加载第一个标签选项的数据完成切换。

参照图3所示，是本发明Tab页面切换方法较佳实施例的流程图。

步骤S10，获取所述Tab页面初始化的窗口宽度，根据所述窗口宽度计算所述标签选项的宽度，并根据预设排序规则对所有标签选项进行排序及渲染。

例如：查看两个城市的男女比例，则titleList为：

[

{title:'深圳'，childs:[{title:'男'},{title:'女'}]},

{title:'上海'，childs:[{title:'男'},{title:'女'}]}

]

步骤S20，监测所述所有标签选项的索引序号及网络站点的指标并将所述指标存储于每个标签选项对应的容器。

步骤S30，当监测到当前标签选项的索引序号发生变化时，将所述当前标签选项的显示页面切换至目标标签选项的显示页面，并查询所述目标标签选项的容器是否存储有目标标签选项的数据，当所述容器中存储有所述数据时，获取所述目标标签选项的网络站点，判断所述网络站点与当前标签选项的网络站点是否相同，当所述网络站点与当前标签选项的网络站点相同时，将当前标签选项的数据切换至目标标签选项的数据。

此外，本发明实施例还提出一种计算机可读存储介质，该计算机可读存储介质可以是硬盘、多媒体卡、SD卡、闪存卡、SMC、只读存储器(ROM)、可擦除可编程只读存储器(EPROM)、便携式紧致盘只读存储器(CD-ROM)、USB存储器等等中的任意一种或者几种的任意组合。所述计算机可读存储介质中包括Tab页面切换程序 10，所述Tab页面切换程序10被处理器执行时实现如下操作：

初始化步骤：获取初始Tab页面的窗口宽度，根据所述窗口宽度计算所述标签选项的宽度，并根据预设排序规则对所有标签选项进行排序及渲染；

监测步骤：监测所述所有标签选项的网络站点及索引序号的指标并将所述指标存储于所述标签选项对应的容器；及

本发明之计算机可读存储介质的具体实施方式与上述Tab页面切换方法的具体实施方式大致相同，在此不再赘述。

需要说明的是，上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。并且本文中的术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，电子装置，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims

1.一种Tab页面切换方法，应用于电子装置，其特征在于，所述Tab页面包括多个标签选项，每个标签选项包括显示页面及容器，所述方法包括：

监测步骤：监测所述所有标签选项的索引序号及网络站点的指标，并将所述指标存储于每个标签选项对应的容器；及

2.如权利要求1所述的Tab页面切换方法，其特征在于，所述预设排序规则包括：将处于激活状态的标签选项自左向右排序，将处于未激活状态的标签选项隐藏在所述窗口两侧。

3.如权利要求1所述的Tab页面切换方法，其特征在于，所述网络站点包括网站编号及网站名称，所述索引序号包括标签选项的索引序号及该标签选项子菜单的索引序号。

4.如权利要求1所述的Tab页面切换方法，其特征在于，所述当监测到当前标签选项的索引序号发生变化时之后，还包括：利用预设算法计算所有标签选项到所述窗口的距离；所述将所述当前标签选项的显示页面切换至目标标签选项的显示页面具体包括：根据所述距离将所述目标标签选项的显示页面移动至所述窗口。

5.如权利要求1至4任意一项所述的Tab页面切换方法，其特征在于，所述切换步骤还包括：当所述目标标签选项的容器未存储目标标签选项的数据时，触发网络请求加载所述数据。

6.一种电子装置，该电子装置包括存储器及处理器，其特征在于，所述存储器上存储Tab页面切换程序，所述Tab页面切换程序被所述处理器执行，实现如下步骤：

7.如权利要求6所述的电子装置，其特征在于，所述预设排序规则包括：将处于激活状态的标签选项自左向右排序，将处于未激活状态的标签选项隐藏在所述窗口两侧。

8.如权利要求6所述的电子装置，其特征在于，所述网络站点包括网站编号及网站名称，所述索引序号包括标签选项的索引序号及该标签选项子菜单的索引序号。

9.如权利要求6所述的电子装置，其特征在于，所述当监测到当前标签选项的索引序号发生变化时之后，还包括：利用预设算法计算所有标签选项到所述窗口的距离；所述将所述当前标签选项的显示页面切换至目标标签选项的显示页面具体包括：根据所述距离将所述目标标签选项的显示页面移动至所述窗口。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中包括Tab页面切换程序，所述Tab页面切换程序被处理器执行时，可实现如权利要求1至5中任一项所述Tab页面切换方法的步骤。